Cssテキスト改行、オーバーフロー、位置合わせ
2480 ワード
テキストの折り返し
強制改行:純数値または純アルファベットの場合、この文字は1文字とみなされますので、自動的に改行されません.親コンテナの幅が足りない場合は、親コンテナの制限を超えます.
ソリューション:自動改行を設定する
a、word-breakは非中日韓文字の改行規則を規定する
word-break:normalは許容されるブレークポイントでのみ改行します(ブラウザはデフォルトの処理を維持します).
word-break:break-all/break-word長い文字で改行を許可
word-break:keep-allは半角スペースまたはハイフンでのみ改行できます
互換性:メインストリームブラウザの互換性
a、
word-wrap
属性規定自動改行の処理方法
word-wrap:normalは許容されるブレークポイントでのみ改行します(ブラウザはデフォルトの処理を維持します).
word-wrap
: break-word
長い文字で改行を許可
互換性:メインストリームブラウザの互換性
改行を強制しない:テキストがあまり長くない文字列の場合、境界値に達すると中日韓文字が自動的に改行され、1行だけ表示される場合は改行を強制しないようにします.
ソリューション:設定するせっていする
white-space:nowrap
white-spaceプロパティは処理です
テキストオーバーフロー
テキストオーバーフロー処理属性はtext-overflow
text-overflow:clipは境界値でテキストを遮断して隠すだけ
text-overflow:ellipsis境界を超えたテキストは「...」に代わる
単行表示オーバーフロー部分は「...」代わりに、テキストのコンテナがspan、iなどの行レベル要素である場合はブロックレベル要素に設定し、コンテナ幅を設定し、テキストを改行しないように強制し、コンテナ非表示属性を設定します.
span{
display: block;
width: 100%;
white-space: nowrap; /* */
overflow: hidden;
text-overflow: ellipsis;
}
2つのspanが同時にオーバーフローする必要がある場合「...」同じ行に表示される場合はdisplay:inline-blockを設定してください.width:49%;
テキストの配置
水平位置揃え:水平位置合わせは主にjustifyについて
text-align:justify;テキストの内容が1行も表示されない場合は、テキストの内容が親コンテナの両端の境界に位置することができます.
使用:中韓日文字テキストで段落階層の不揃いの問題を処理できる
弊害:非中日韓文字は、文字が長すぎると予想できない表現になります.
理由:両端揃えテキストでは、テキスト行の左右両端が親要素の内側境界に配置されます.そして、単語とアルファベットの間隔を調整して、各行の長さをちょうど等しくします.
テキストオーバーフロー処理属性はtext-overflow
text-overflow:clipは境界値でテキストを遮断して隠すだけ
text-overflow:ellipsis境界を超えたテキストは「...」に代わる
単行表示オーバーフロー部分は「...」代わりに、テキストのコンテナがspan、iなどの行レベル要素である場合はブロックレベル要素に設定し、コンテナ幅を設定し、テキストを改行しないように強制し、コンテナ非表示属性を設定します.
span{
display: block;
width: 100%;
white-space: nowrap; /* */
overflow: hidden;
text-overflow: ellipsis;
}
2つのspanが同時にオーバーフローする必要がある場合「...」同じ行に表示される場合はdisplay:inline-blockを設定してください.width:49%;