CSS 必須改行の使用 wordbreak および word-wrap_html/css_WEB-ITnose

通常の状況では、要素にはデフォルトのwhite-space:normal (自動行折り返し、行折り返しなしのwhite-space:nowrap) が設定されていますが、入力されたテキストが定義された幅を超えると、自動的に折り返しられます。データはパイル内にスペース文字、文字、数字がありません (通常のデータにはスペース文字、文字、数字が含まれていないはずですが、一部のテスターはこのようにしています)。コンテナーの幅を超えると、コンテナーは改行なしで展開されます。

したがって、このソリューション (テスト ブラウザとして IE、Chrome、FF を使用) には 2 つの記述方法があります:

{

word-break:break-all;

;

} 2 つのメソッドの違いの説明:

1、word-break:break-all たとえば、div の幅が 400 ピクセルの場合、そのコンテンツは自動的に 400 ピクセルで折り返されます。行末に英語のテキストがあります。単語が非常に長い場合 (おめでとうなど)、行末が conra (おめでとうの前の部分) になり、次の行になるように単語が切り詰められます。テュレーション（conguatulation）の後ろの部分です。

2. word-wrap:break-word の例は上記と同じですが、行末が単語全体を表示するのに十分な幅がない場合に、単語全体を祝福する点が異なります。単語が切り捨てられることなく、単語全体が自動的に次の行に配置されます。

html コード:

<div style="width:400px;background:#000;color:#fff;height:100px;margin:0 auto;word-break:break-all; ">    congratulation congratulation congratulation congratulation congratulation congratulation</div></br/><div style="width:400px;height:100px;background:#000;color:#fff;margin:0 auto;word-wrap:break-word;">    congratulation congratulation congratulation congratulation congratulation congratulation</div>

結果は図のようになります:

これは一目瞭然です。

著者: 嵐の後の虹を見ましょう

出典: http://www.cnblogs.com/moqiutao/

この記事があなたの研究に役立つと思われる場合は、サポートと励ましをお願いします自分 。