CSS強制改行以降の非表示の実装

1. 強制改行

ワードブレイク: ブレークオールは英語でのみ機能し、改行の基礎として文字を使用します。

word-wrap:break-word; 単語を改行の基礎として使用し、英語でのみ機能します。

white-space: pre-wrap; 中国語でのみ機能し、行の折り返しを強制します。

word-break:break-all と word-wrap:break-word は両方とも、div などのコンテナーのコンテンツを自動的にラップできるようにします。 それらの違いは次のとおりです。

1. word-break:break-all

div を想定します。幅が 450 ピクセルの場合、その内容は自動的に 450 ピクセルで折り返されます。行末に長い英単語がある場合は、単語が切り捨てられ、その一部が行末に保持され、その部分が移動されます。他の部分は次の行に。

2. word-wrap:break-word

この例は上記と同じですが、行末が全体を表示するのに十分な幅がない場合、単語全体を全体として扱う点が異なります。単語を切り詰めることなく、単語全体が自動的に 1 行にまとめられます。

2. 改行を禁止し、非表示を超えます

white-space:nowrap; は改行を禁止します。

overflow:hidden; は余分なコンテンツを非表示にします。そうしないと、余分なコンテンツがコンテナをバーストします。

text-overflow:ellipsis; 余分なコンテンツを省略記号で表現します...ただし、この属性は主に IE などのブラウザで使用されます。Opera ブラウザでは -o-text-overflow:ellipsis; が使用されますが、Firefox ブラウザにはこの機能がなく、余分なコンテンツは非表示にすることしかできません。