ワードラップ時に指定した位置で文字列を改行する - HTML

HTMLでワードラップの際に指定した位置で改行させる場合のコードを紹介します。

概要

ワードラップ時に指定した位置で改行させたい場合には <wbr> タグを利用します。

何も指定しない場合の動作の確認

何もタグを指定しない場合の動作を確認します。下図のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <style>
    <!--
    .Container {
      display:flex;
    }
    .Caption {
      border:solid 1px #ff6a00;
      flex: 1;
    }
    .Value{
      border:solid 1px #ffd800;
      flex:10;
    }
    -->
  </style>
</head>
<body>
  <div class="Container">
    <div class="Caption">基準測定値</div><div class="Value">1250</div>
  </div>
</body>
</html>

上記のHTMLをChromeで開きます。下図のページが表示されます。

ウィンドウの幅を徐々に狭くします。左側の領域の幅が狭くなり改行が必要になります。

さらに幅を狭めると1文字分改行されて次の行に表示されます。

さらに幅を狭めます。

さらに幅を狭めると末尾から2文字目が改行され次の行に移動します。

さらに幅を狭めると下図の状態になります。

wbr タグを利用した改行位置指定

先の動作では幅を狭めると1文字ずつワードラップされて次の行に移りますが、意味の切れ目で改行したいことがあります。先の例での「基準測定値」であれば「基準」と「測定値」の間の部分で改行をしたいです。改行位置を指定する場合は改行をブロックする nobr タグで囲み、改行させたい一に wbr タグを利用します。

wbrタグを利用したコードを下記で紹介します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <style>
    <!--
    .Container {
      display:flex;
    }
    .Caption {
      border:solid 1px #ff6a00;
      flex: 1;
    }
    .Value{
      border:solid 1px #ffd800;
      flex:10;
    }
    -->
  </style>
</head>
<body>
  <div class="Container">
    <div class="Caption"><nobr>基準<wbr />測定値</nobr></div><div class="Value">1250</div>
  </div>
</body>
</html>

上記のHTMLファイルをChromeで開きます。下図のページが表示されます。