div幅を超えた文字は省略し、マウスを移動した後に完全な内容を表示します
Div+css:切り取りの方法で、タイトルは10文字しか表示されず、残りは...で表示され、マウスを置いた後、すべての内容が表示されます.
注記:Overflow:hidden;/ファイルの自動非表示/Text-overflow:ellipsis;/テキストを非表示にして省略記号を追加/White-space:nowrap;/改行を強制/Width:10 em;/半漢字カットは許可されていません/
IE 6/IE 7にdisplay:inline-blockプロパティをサポートさせる方法:ブロック要素をインラインにしてからzoom:1を使用してブロック要素layout:display:inline-blockをトリガーします.*display: inline; *zoom: 1;
はい.demo:hoverにword-break:break-allは入っていません.以前、英語が1行を占め、中国語が1行を占めていることがわかりました.つまり、同行中の中国語と英語が1行に維持できないのは、white-space:pre-wrapのためです.中国語のみに作用し、改行を強制し、word-break:break-all;英語にのみ作用し、アルファベットを改行の根拠とする.(word-warp:break-word;英語のみに作用し、単語を改行の根拠とする)
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ellipsistitle>
head>
<body>
<style>
.demo {display: inline-block;*display: inline;*zoom: 1;width: 10em;height: 20px;line-height: 20px;font-size: 12px;overflow: hidden;-ms-text-overflow: ellipsis;text-overflow: ellipsis;white-space: nowrap;}
.demo:hover {height: auto; word-break:break-all; white-space: pre-wrap; text-decoration: none;}
style>
<a href="#" target="_blank" class="demo" title=" ， ， 。"> ， ， 。a>
body>
html>注記:Overflow:hidden;/ファイルの自動非表示/Text-overflow:ellipsis;/テキストを非表示にして省略記号を追加/White-space:nowrap;/改行を強制/Width:10 em;/半漢字カットは許可されていません/
IE 6/IE 7にdisplay:inline-blockプロパティをサポートさせる方法:ブロック要素をインラインにしてからzoom:1を使用してブロック要素layout:display:inline-blockをトリガーします.*display: inline; *zoom: 1;
はい.demo:hoverにword-break:break-allは入っていません.以前、英語が1行を占め、中国語が1行を占めていることがわかりました.つまり、同行中の中国語と英語が1行に維持できないのは、white-space:pre-wrapのためです.中国語のみに作用し、改行を強制し、word-break:break-all;英語にのみ作用し、アルファベットを改行の根拠とする.(word-warp:break-word;英語のみに作用し、単語を改行の根拠とする)