空白の単語をCSSで区切らないでください

Question

divの幅が設定されています。デフォルトでテキストが壊れる方法は空白です。利用可能な最大スペースを埋めるために、任意の文字でテキストが壊れるように、要素のスタイルを設定する方法はありますか？

ありがとうございます！

Answer 1

CSSのワード-breakプロパティは、時に改行が発生するべき変更するために使用することができます。通常、テキストの改行はスペースやハイフンなどの特定のスペースでのみ発生します。しかし、word-break: break-allを使用すると、それを無効にすることができます。

これは、長いURLがテキストコンテナから抜けるのを止めるのに非常に便利です。

div { 
 
width: 200px; 
 
background: pink; 
 
} 
 
    
 
p {word-break: break-all; }

<div> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis, justo quis mollis volutpat, nibh enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis, justo quis mollis volutpat, nibh enim</p> 
 
</div>

jQueryの「代替」https://github.com/bramstein/hypher、を含むが、これらに限定されない

プラグインも使用することができ、おそらく関連する辞書を用いて、よりよい全体的な外観（言語を与えます依存する）、それらが壊れたときに適切に単語をハイフネーションする。