htmlで改行の制御を行うCSS生成

htmlの標準では、連続した英字などは改行が行われないため、枠よりはみ出す場合があります。この場合、「word-break」「word-wrap」を使用して改行することができます。
逆に改行させたくない場合やHTMLに記述した通りに開業した場合は「white-space」を使用します。

「word-break」と「word-wrap」の違いは微妙で、特に日本語の単語認識の説明が難しいので、以下サンプルで色々な組み合わせの表示内容をご確認ください。
好みにも寄りますが、お勧めは「word-break:break-all」または「word-break:keep-all;word-wrap:break-word」となります。

生成された「html」「css」などのソースコードは、そのままコピー＆ペーストで利用することが出来ます。

「word-break」「word-wrap」「word-wrap」のデフォルトはすべて「normal」です。

<div class="str">
  <p>htmlで改行制御を行うには、
CSSの「word-break」「word-wrap」と「white-space」を使用します。</p>
  <p>長い英単語を調べたら
「pneumonoultramicroscopicsilicovolcanoconiosis」のようです。</p>
</div>

<style type="text/css">
.str {
  /*--- サンプル表示の枠 ---------------------------- */
  width           : 260px;
  background      : #fff;
  border          : 1px solid #999;
  padding         : 5px;
  margin          : 0 auto;
  font-weight     : normal;
  text-align      : left;
  font-size       : 12pt;
 
  /* --- 文字情報設定 ------------------------------- */
  line-height     : 1.3;          /* 行間隔（1行高さ）*/
  letter-spacing  : .1em;         /* 文字間隔         */
  word-break      : normal;
  word-wrap       : normal;
}
</style>