ホームページ >ウェブフロントエンド >CSSチュートリアル >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 ブラウザにはこの機能がなく、余分なコンテンツは非表示にすることしかできません。