文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > 文字のデザイン > 改行位置の指定

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」です。

指定するCSS
   
word-breakの値
word-wrap
文字間隔(改行位置が変わります)
文字間隔

htmlで改行制御を行うには、 CSSの「word-break」「word-wrap」と「white-space」を使用します。

長い英単語を調べたら 「pneumonoultramicroscopicsilicovolcanoconiosis」のようです。

使用したhtml
<div class="str">
  <p>htmlで改行制御を行うには、
CSSの「word-break」「word-wrap」と「white-space」を使用します。</p>
  <p>長い英単語を調べたら
「pneumonoultramicroscopicsilicovolcanoconiosis」のようです。</p>
</div>
生成したCSS
<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>
ページTOP
広告
広告
広告

生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン