テキストレイアウトの問題を解決するためにテキストオーバーフローを使用する CSS3 の簡単な分析

基本的な構文
text-overflow を使用するには、hight、over-flow:hidden、white-space:nowrap の 3 つの属性を使用する必要があります。

テキストオーバーフロー: クリップ;省略記号;文字列
クリップ: 表示せずに直接非表示にする
楕円: 3 つのドットを使用して、テキストがあふれていることを示します (よく使用されます)
文字列: 配置できない文字を表す記号をカスタマイズできます

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
	<メタ文字セット="UTF-8">
	<タイトル></タイトル>
	<スタイル タイプ="text/css">
		.tf{
			幅: 100ピクセル;
			高さ:50px;
			border:1px 黒一色;
			オーバーフロー: 非表示;
			text-overflow: clip;/*テキストを非表示にしたいだけなら、この文を追加するかどうかは関係ありません。height+overflowはあふれたテキストを直接非表示にすることができます*/
		}
		.tf1{
			幅: 100ピクセル;
			border:1px 黒一色;
			オーバーフロー: 非表示;
			テキストオーバーフロー: 省略記号;
			-webkit-テキストオーバーフロー: 省略記号;
			空白: ラップなし;
			/*省略記号属性を使用する場合 text-overflow:ellipsis; overflow: hidden;white-space: nowrap;
			 これら3つの属性は不可欠です*/
		}
	</スタイル>
</head>
<本文>
	<div class="tf">
		123WORDPRESS.COM123WORDPRESS.COM123WORDPRESS.COM123WORDPRESS.COM123WORDPRESS.COM123WORDPRESS.COM123WORDPRESS.COM123WORDPRESS.COM。
	</div>

	<div class="tf1">
		123WORDPRESS.COM123WORDPRESS.COM123WORDPRESS.COM123WORDPRESS.COM123WORDPRESS.COM。
	</div>

	
</本文>
</html>

CSS3 がテキストオーバーフローを使用してテキストタイプ設定の問題を解決する方法についての簡単な分析を説明したこの記事はこれで終わりです。CSS3 テキストタイプ設定に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

<<: MySQL テーブルの断片化を解消し、スペースを再利用する方法

>>: 入力ボックスのカーソルサイズの表示が一貫していない問題の解決方法