ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS テキストが ellipses_html/css_WEB-ITnose を超えています

CSS テキストが ellipses_html/css_WEB-ITnose を超えています

WBOY
WBOYオリジナル
2016-06-24 11:34:581316ブラウズ

white-space:nowrap; overflow:hidden; -o-text-overflow:ellipsis; text-overflow:ellipsis;

構文:

text-overflow: Clip | ellipsis

パラメータ:

clip: 省略記号(...)を表示せず、単純に切り抜きます

(パラメータclipは一般的ではありません) used!)

ellipsis: オブジェクト内のテキストがオーバーフローしたときに省略記号 (...) を表示します

説明:

テキストのオーバーフローをマークするために省略記号 (...) を使用するかどうかを設定または取得しますオブジェクトの中で。

text-overflow:ellipsis 属性は FF では効果がないことに注意してください。

例:

div { text-overflow : Clip; }

text-overflow は、通常使用するタイトルインターセプト関数を置き換えるために使用でき、以下のような検索エンジンにとってよりフレンドリーです。 : タイトル ファイルには 50 文字の漢字が含まれていますが、リストの幅は 300 ピクセルしかありません。タイトルインターセプト機能を使用した場合、タイトルは完全ではありません。CSS スタイルの text-overflow:ellipsis を使用した場合、出力されるタイトルは完全になりますが、コンテナー サイズの制限により表示されません。

text-overflow属性は、テキストが溢れた場合に省略記号を表示するかどうかの単なる注釈です。他にスタイル属性の定義はありません。オーバーフロー時に省略記号を生成する効果を実現したいと考えています。また、テキストを 1 行で表示するように強制し (white-space:nowrap)、オーバーフローしたコンテンツを非表示にする (overflow:hidden) ことも定義する必要があります。この方法でのみ、オーバーフロー テキストに省略記号を表示する効果を実現できます。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。