ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSで文字をインターセプトするいくつかの方法の詳細な説明(CSS組版はオーバーフローテキストを非表示にします)_CSS/HTML

CSSで文字をインターセプトするいくつかの方法の詳細な説明(CSS組版はオーバーフローテキストを非表示にします)_CSS/HTML

WBOY
リリース: 2016-05-16 12:03:38
オリジナル
2789 人が閲覧しました

方法 1:

コードをコピー コードは次のとおりです。

任意の長さの文字列

注: 利点は、ハイパーリンクや画像などを含む任意の HTML 要素をコンテンツにできることです。IE6 では、末尾に省略記号が自動的に表示されます。欠点は、幅の値を指定する必要があり、幅をパーセンテージで指定することはできないことです。そうでないと、IE では文字長の合計に対するパーセンテージとしてみなされてしまいます。

方法 2:

コードをコピー コードは次のとおりです。


P>

注: 利点は、幅をパーセンテージで設定できることです。ただし、コンテンツはプレーン テキストのみであり、ハイパーリンクやその他のコンテンツを含めることができないという欠点があります。

CSS は文字列を切り詰めます CSS は自動テキスト切り詰めを実装します。コードは次のとおりです。

コードをコピー コードは次のとおりです:

div.test{

幅:200px;

高さ:14px;

オーバーフロー:非表示;

空白:nowrap;

テキストオーバーフロー:省略記号;

text-overflow: ellipsis;/* IE/Safari */

-ms-text-overflow: 省略記号;

-o-text-overflow: ellipsis;/* Opera */

-moz-binding: url("ellipsis.xml#ellipsis");/*FireFox*/

}

キーは text-overflow で、その構文は次のとおりです。

コードをコピー コードは次のとおりです:

text-overflow:clip | ellipsisclip : 省略記号 (...) を表示せず、単にトリミングします
ellipsis: オブジェクトが内部テキストにはみ出した場合に省略記号 (...) を表示します

この属性は IE 専用であることに注意してください。ただし、利用できるのは IE だけではありません。このタグは公にサポートされておらず、Guaioh によって採用されていませんが、多くのブラウザのプライベート属性に含まれています。 text-overflow だけでは機能しません。white-space:nowrap;overflow:hidden; と組み合わせる必要があります。前の文の機能は、テキストの終わりまたは br オブジェクトに到達するまで、すべてのテキストを強制的に同じ行に表示することです。

テキスト オーバーフローを使用するのに最適な場所は、記事のテキストではなく、1 行で表示されるタイトルや要約のリストであることは、難しくありません。

構文:

コードをコピー コードは次のとおりです。

空白:normal | pre |ナラップ

値:

コードをコピー コードは次のとおりです。

normal : デフォルト値。デフォルトの処理方法。テキストは自動的に改行を処理します。コンテナの境界に達すると、コンテンツは次の行に移動します
前: 改行およびその他の空白文字は保護されます。この値には、標準準拠モードのサポートとして宣言された IE6 または !DOCTYPE が必要です。 !DOCTYPE 宣言で標準準拠モードが指定されていない場合、この属性は使用できますが、効果はありません。結果は通常の と同等になります。 「pre object」を参照してください。
nowrap: テキストの終わりまたは br オブジェクトに到達するまで、すべてのテキストを強制的に同じ行に表示します。 noWrap 属性を参照してください。

説明:

オブジェクト内の空白文字の処理方法を設定または取得します。

改行、スペース、TAB などのスペース文字は、HTML ドキュメントではデフォルトで無視されます。このプロパティが Normal または nowrap に設定されている場合、非改行スペース名前付きエンティティを使用して空白を追加し、 br 要素を使用して改行を追加できます。このプロパティは、IE で表示されるコンテンツと同じように、ドキュメント オブジェクト モデル (DOM) を使用して操作するコンテンツにも影響します。

このプロパティはブロック オブジェクトに対して機能します。

このプロパティは、currentStyle オブジェクトに対して読み取り専用です。他のオブジェクトについては、読み取りと書き込みが可能です。

対応するスクリプト属性は、whiteSpace です。

関連ラベル:
css
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート