CSS の text-overflow プロパティの概要

構文:
text-overflow : Clip | ellipsis
パラメータ:
clip : 省略記号(...)を表示せず、単純に切り取ります
ellipsis : テキストが含まれている場合に省略記号(..)を表示しますオブジェクトがオーバーフローします。)
説明:
オブジェクト内のテキストのオーバーフローをマークするために省略記号 (...) を使用するかどうかを設定または取得します。
対応するスクリプト機能は textOverflow です。私が書いた他の本もご覧ください。

例:

div { text-overflow : clip; }

CSS2.1でテキストオーバーフロー効果を実現する方法

良さそうです、テストしてみましょう

<div style="width:100px;height:20px;text-overflow:ellipsis; ">a b c d e f g h i j k l , msa sd sd sa w df f </div> 
<div style="width:100px;height:20px;text-overflow:ellipsis; white-space:nowrap; overflow:hidden; ">a b c d e f g h i j k l , msa sd sd sa w df f </div>

この時点では表示は正常です
text-overflow属性はのみ注釈で、テキストが溢れた場合に省略マークを表示するかどうかです。他にスタイル属性の定義はありません。オーバーフロー時に省略記号を生成する効果を実現したいと考えています。また、テキストを 1 行で表示するように強制する (white-space:nowrap)、およびオーバーフロー コンテンツを非表示にする (overflow:hidden) ことも定義する必要があります。この方法でのみ、オーバーフロー テキストに省略記号を表示する効果を実現できます。
1. text-overflow:ellipsis を定義するだけでは省略記号効果を実現できません。
2. text-overflow:ellipsis;white-space:nowrap; を定義すると、省略記号の効果が得られません。 3. この記事で説明されている方法である 52css.com のチュートリアルに従い、同時に適用します。 text-overflow:ellipsis; overflow:hidden; 希望するオーバーフロー テキスト表示省略記号効果を実現します:

div は自動的に幅に適応し、text-overflow インスタンスを使用します rree

以上がCSS の text-overflow プロパティの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。