CSSベース:text-overflow:ellipsisオーバーフローテキスト省略記号表示の詳細方法_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)を強制することも定義する必要があります.このようにしてこそ、オーバーフローテキストに省略記号を表示する効果が得られます.
私達のトップページは1つの無秩序なリストULを創立して、中にいくつかのリスト項目LIがあって、内部はリストリンクAを創立しました.私たちのテストは主にLIで行われています.観察を重視してください.次の3つのコードを見てください.
一、text-overflow:ellipsisのみを定義する.省略記号効果は実現できません.

li {width:300px; line-height:25px; text-overflow:ellipsis;}

二、text-overflow:ellipsisを定義する.white-space:nowrap; 同様に省略記号効果は実現できません.

li {width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap;}

三、同時に適用:text-overflow:ellipsis;white-space:nowrap; overflow:hidden; 必要なオーバーフローテキスト表示省略記号の効果を実現しました.

li {width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}

text-overflow:ellipsisプロパティはFFでは効果がありません.
2011:12月21日最新のテストはすでに火狐ブラウザ(私の火狐は26.0バージョン)に対応しています.今ではほとんどのブラウザが携帯電話ブラウザに対応しています.私はテストをしても互換性があります.微信の内部ブラウザも含まれています.