CSSを使用してテキストオーバーフローを解決する方法

テキストのオーバーフローは、特にプログラム環境では常に大きな問題になります。スペースは常に限られていますが、そのスペースに可変コンテンツを追加できます。最近、ユーザー情報の表示に使用されるテーブルで作業していたところ、長い文字列によってテーブルの表示が分割されていることに気付きました。明らかな解決策は、表のセルに overflow: hidden 設定を追加することですが、それでもテキストが自然に切れて見えるわけではありません。テキスト オーバーフローをエレガントにするには、省略記号と CSS の text-overflow プロパティを使用します。見てみましょう！

CSS

幅、折り返し、オーバーフロー、テキスト オーバーフローを含め、省略記号の背後にある CSS の作成は非常に簡単です。

.dataTable td { 
/ * essential * / 
text-overflow ：ellipsis ; 
width： 200px ; 
white-space： nowrap ; 
overflow：hidden ;
/ *外观漂亮* / 
padding： 10px; 
}

幅を設定すると、次のことが可能になります。明確な境界線、空白によって通常の次の行の折り返しが防止され、非表示のオーバーフローによって幅の寸法が確実に尊重され、テキスト オーバーフロー設定によって省略記号が提供されます。すごいですよね？しかし、問題があります...

Firefox と省略記号

残念ながら、Firefox は現在テキスト オーバーフロー、省略記号をサポートしていません。 Dojo Toolkit は、Firefox 用のシンプルなソリューション dojox.html.ellipsis を提供します。このリソースは、iFrame シムを使用して楕円を作成します。使用方法は次のとおりです:

//需要资源 dojo 。require （“dojox.html.ellipsis” ）;

JavaScript リソースを要求した後、dojoxEllipsis がページ内にノードを配置して、dojox.html.ellipsis リソースがそれを省略する必要があることを示します:

< div  class = “ dojoxEllpsis ” > Pellentesque居住者morbi tristique senectus et netus et malesuada ... </ div >

dojoxEllipsis DOM ツリーが変更されるたびに、Dojo はページ内で CSS クラスを持つ要素を検索し、その要素を省略します。

コンテンツに動的楕円を実装することは、制限されたコンテンツ内のコンテンツをエレガントに管理するためのシンプルかつ巧妙かつ効果的な方法です。テキスト オーバーフロー: 省略記号は、Firefox を除く主要なブラウザ ベンダーによってサポートされています。 Dojo の実装は安定していて効率的ですが、ページ上に楕円形の要素が多数ある場合はページの速度が低下する可能性があります。楕円化を楽しんでください。

以上がCSSを使用してテキストオーバーフローを解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。