text-overflow:ellipsisオーバーフローテキスト省略記号の詳細を表示する方法
text-overflowは比較的特殊な属性であり、CSSマニュアルでは、この属性はこのように定義されています.
構文:
text-overflow : clip | ellipsis
パラメータ:
clip:省略フラグは表示されません(...)、簡単な裁断です
(clipというパラメータはあまり使われません!)
Ellipsis:オブジェクト内のテキストがオーバーフローしたときに省略フラグが表示されます(...)
説明:
省略タグを使用するかどうかを設定または取得します(...)オブジェクト内のテキストのオーバーフローを示します.
text-overflow:ellipsis属性はFFでは効果がないことに注意してください.
例:
div { text-overflow : clip; }
text-overflowは比較的特殊なスタイルで、通常使用されているタイトルカット関数の代わりに使用することができます.また、タイトルファイルには50の漢字があり、リストには300 pxの幅しかない可能性があります.見出しで関数を切り取ると、見出しは完全ではありません.CSSスタイルtext-overflow:ellipsisを使用すると、出力される見出しは完全ですが、コンテナサイズの制限で表示されません.
text-overflowプロパティの適用方法については、次のように説明します.
text-overflowプロパティは注記のみで、テキストがオーバーフローしたときに省略マークが表示されるかどうか.他のスタイル属性定義はありません.オーバーフロー時に省略記号を生成する効果を実現したい.また、テキストの行内表示(white-space:nowrap)とオーバーフローコンテンツの非表示(overflow:hidden)を強制することも定義する必要があります.このようにしてこそ、オーバーフローテキストに省略記号を表示する効果が得られます.
構文:
text-overflow : clip | ellipsis
パラメータ:
clip:省略フラグは表示されません(...)、簡単な裁断です
(clipというパラメータはあまり使われません!)
Ellipsis:オブジェクト内のテキストがオーバーフローしたときに省略フラグが表示されます(...)
説明:
省略タグを使用するかどうかを設定または取得します(...)オブジェクト内のテキストのオーバーフローを示します.
text-overflow:ellipsis属性はFFでは効果がないことに注意してください.
例:
div { text-overflow : clip; }
text-overflowは比較的特殊なスタイルで、通常使用されているタイトルカット関数の代わりに使用することができます.また、タイトルファイルには50の漢字があり、リストには300 pxの幅しかない可能性があります.見出しで関数を切り取ると、見出しは完全ではありません.CSSスタイルtext-overflow:ellipsisを使用すると、出力される見出しは完全ですが、コンテナサイズの制限で表示されません.
text-overflowプロパティの適用方法については、次のように説明します.
text-overflowプロパティは注記のみで、テキストがオーバーフローしたときに省略マークが表示されるかどうか.他のスタイル属性定義はありません.オーバーフロー時に省略記号を生成する効果を実現したい.また、テキストの行内表示(white-space:nowrap)とオーバーフローコンテンツの非表示(overflow:hidden)を強制することも定義する必要があります.このようにしてこそ、オーバーフローテキストに省略記号を表示する効果が得られます.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>52CSS</title>
<style type="text/css">
ul {width:300px; margin:50px auto;}
li {width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
a {color:#03c; font-size:13px;}
a:hover {color:#000;}
</style>
</head>
<body>
<ul>
<li><a href="http://www.52css.com/">CSS - Pro CSS Techniques </a>
<li><a href="http://www.52css.com/">CSS ：id class </a>
<li><a href="http://www.52css.com/">CSS ：CSS </a>
<li><a href="http://www.52css.com/">Web ： </a>
<li><a href="http://www.52css.com/"> IE7 A ！</a>
<li><a href="http://www.52css.com/">CSS td 1px </a>
</ul>
<a href="http://www.52css.com/" title="" style="display:block; text-align:center; color:#c00;">52CSS.com ， 。 </a>
</body>
</html>