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

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

推薦する

Vueバインディングオブジェクトと配列変数を変更した後にレンダリングできない問題の解決策

プロジェクトシナリオ:ページ表示には <ul> タグがあります。リストデータを動的に表示...

ウェブサイトのコードブロックのpreタグにコピーコードボタンコードを追加します

他のよりプロフェッショナルなブログ システムを参照すると、コード ブロックにコードのコピー ボタンが...

Dockerコンテナにホストディレクトリへの書き込み権限がない場合の解決策

Docker コンテナを適用する場合、多くの場合、ホスト ディレクトリを Docker コンテナにマ...

ドロップダウンリストのJavaScript実装

この記事の例では、ドロップダウンリストを実装するためのJavaScriptの具体的なコードを参考まで...

HTML マウス CSS コントロール

一般的に、マウスは上向きの斜め矢印として表示され、テキストの上に移動すると垂直線になり、ハイパーリン...

WeChatアプレットの下部にあるタブバーがコンテンツをブロックする問題に対処する簡単な方法

WeChatアプレットでタブバーを設定すると、重要なコンテンツがブロックされ、iPhoneXなどの異...

HTML+CSS+JS でキャンバスがマウスの小さな円に追従する特殊効果のソースコードを実現

効果(ソースコードは最後にあります): 成し遂げる: 1. タグを定義します。 <h1>...

JavaScript の組み込みオブジェクト 数学と文字列の詳細な説明

目次数学オブジェクト共通プロパティ一般的な方法Math.random()文字列メソッド長さプロパティ...

tomcat デプロイメント プロジェクトの実装と IDEA との統合

目次Tomcat でプロジェクトを展開する 3 つの方法プロジェクトをwebappsディレクトリに直...

Webリクエストと処理のTomcatソースコード分析

目次序文1. エンドポイント2. 接続ハンドラ3. コヨーテ4. コンテナ責任チェーンパターン序文T...

CSS は Apple のスムーズなスイッチ ボタン効果を模倣します

目次1. コード分析2. ソースコードソースコード1. コード分析1.1 HTMLコード分析 <...

JavaScriptを使用して独自のAjax関数を定義する

ネイティブJSによって開始されたネットワークリクエストは、クエリ文字列の形でサーバーに送信されるため...

CentOS7環境でDockerを使ってPHP動作環境を構築する手順を詳しく解説

関連記事: CentOS7でyumを使用してDockerをインストールするDockerを使ってWin...

MySQL 高可用性クラスタの展開とフェイルオーバーの実装

目次1. 内閣府1. コンセプト2. MHAの構成3. MHAの特徴2. MySQL+MHAをビルド...

Nexusプライベートサーバー構築原理とチュートリアル分析

1つ。 Nexus プライベート サーバーを構築する理由は何ですか?社内の開発メンバーは全員外部ネッ...