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

テキストレイアウトの問題を解決するためにテキストオーバーフローを使用する 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 テーブルの断片化を解消し、スペースを再利用する方法

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

推薦する

TomcatとJDKのバージョンの対応と各Tomcatバージョンの機能

Apache Tomcat は、Java Servlet および Java Server Pages...

MySQL プロジェクトでトランザクション分離レベルを選択する方法

導入コンテンツから始めましょう。誰もが次のような面接のシナリオに遭遇したことがあると思います。インタ...

Vue でクラスとスタイルを使用して v-bind バインディングを使用するいくつかの方法

要素にクラスを追加/削除することは、プロジェクト開発では非常に一般的な動作です。たとえば、Web サ...

Nginx rtmp モジュールのコンパイル ARM バージョンの問題

目次1. 準備: 2. ソースコードのコンパイル1. 設定する2. コンパイルエラー3. ターゲット...

CSS3 アニメーション – ステップ機能の説明

最近、CSS3 アニメーションのソース コードの実装をいくつか見ていたところ、CSS コード アニメ...

MySQL で null 値と空文字 ('') を区別する

日常の開発では、データベースの追加、削除、変更、クエリが一般的に行われるため、Mysql で NUL...

Linux で Multitail コマンドを使用するチュートリアル

MultiTail は、tail コマンド機能と同様に、複数のドキュメントを同時に監視するために使用...

テンプレートタグの使用方法の詳細な説明(Vue での使用方法の概要を含む)

目次1. HTML5のテンプレートタグ2. テンプレートタグ操作のプロパティとメソッド3. Vueの...

TypeScript 名前空間のマージの説明

目次同じ名前の名前空間をマージする名前空間とその他の種類のマージ同じ名前の名前空間とクラスをマージす...

MySQL Limitクエリのパフォーマンスを向上させる方法

MySQL データベース操作では、一部のクエリを実行するときにデータベース エンジンが完全なテーブル...

シンプルなスネークを実現するためのネイティブjsキャンバス

この記事では、参考までに、簡単なスネークゲームを実装するためのjsキャンバスの具体的なコードを共有し...

MySQL InnoDB の重要なコンポーネントの概要

Innodbには以下のコンポーネントが含まれています1. innodb_buffer_pool:これ...

MySQLのSQL文はインデックスを使用しません

インデックス集約を使用しない MySQL クエリご存知のとおり、インデックスを追加することはクエリ速...

Vue 開発ツリー構造コンポーネント (コンポーネント再帰)

この記事では、Vue開発ツリー構造コンポーネントの具体的なコードを例として紹介します。具体的な内容は...

インデックスを使用して MySQL ORDER BY ステートメントを最適化する方法

テーブルの作成とインデックスの作成 テーブルtbl1を作成( id int ユニーク、sname v...