CSS の単一行テキストと複数行のオーバーフロー テキストにおける省略記号の問題

テキスト レイアウトやコード作成プロセス中にテキスト オーバーフローが発生するのはよくあることです。以下に、単一行のテキスト オーバーフローと複数行のテキスト オーバーフローの省略記号の処理をまとめます。

1つ。単一行テキストの省略記号

リーリー

リーリー

これは、単一行テキスト オーバーフローの単純なテキストの例です。

オーバーフローを判断するには幅を知る必要があるため、ここでの width 属性が必要です。

overflow 属性は、オーバーフローしたテキストを非表示にするために使用されます。

空白:

値普通前ナウラップラッピング前プレライン継承 テキストオーバーフロー:

説明
デフォルト。空白はブラウザによって無視されます。
空白はブラウザによって保持されます。これは HTML の <pre> タグのように動作します。
テキストは折り返されず、<br> タグが見つかるまで同じ行に続きます。
空白シーケンスを保持しますが、通常通りに折り返します。
空白シーケンスを結合しますが、改行は保持します。
空白属性の値が親要素から継承される必要があることを指定します。

値クリップ省略記号文字列2つ。複数行テキストの省略記号

説明
テキストをトリミングします。
トリミングされたテキストを表す楕円を表示します。
指定された文字列を使用して、トリミングされたテキストを表します。

リーリー

リーリー

上で述べたことについてはここではこれ以上述べません。

ここでは、height 属性と overflow 属性を組み合わせて、省略記号の下のテキストを非表示にします。追加せずに効果を試すと、一目瞭然です。

line-clamp 属性は、表示されるテキストの行数を制御します。

ディスプレイとボックスの向きについて、ここで簡単に説明しましょう:

注: ボックスを分割する前に、表示属性を定義する必要があります。

box-orient属性は、boxの子要素を水平方向に配置するか垂直方向に配置するかを指定します。

値横縦型インライン軸ブロック軸継承それでも理解できない場合は、Web サイト http://wenlong883.blog.163.com/blog/static/1718109162011102281912385/ にアクセスするか、w3c のさまざまな CSS 属性を確認してください。

説明
子要素が水平線上に左から右に配置されるように指定します
子要素を上から下に垂直に配置します
子要素はインライン軸に沿っています (横向きにマップされています)
子要素はブロック座標軸に沿っています（垂直方向にマッピングされています）
box-orient 属性の値は親要素から継承する必要があります