できない.dev

CSSで長い URL や英単語が枠からはみ出すのを防ぐには

スペースを含まない長い URL や英数字の列が箱の幅を超えるとき、overflow-wrap: anywhere で文字の途中で折り返して枠に収める基本形を示す。
break-word や word-break: break-all との違いも確認できる。

公開:

プレビュー
<div class="card"><p class="label">参照元の URL</p><p class="url">https://example.com/docs/guides/installation/configuration/options</p></div>
.card {
  width: 220px;
  padding: 12px 14px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  font: 14px/1.7 system-ui;
}
.label {
  margin: 0 0 4px;
  font-weight: 600;
}
.url {
  margin: 0;
  overflow-wrap: anywhere;
}

overflow-wrap: anywhere を付けると、スペースのない長い文字列は箱の幅に収まらないときだけ文字の途中で折り返される。
URL やハッシュ値のように区切りのない文字列でレイアウトが横に崩れるのを防ぐためである。

区切りのない文字列は枠を突き抜ける

日本語の文章は文字の間で折り返せるが、スペースを含まない英数字の連続は 1 つの単語として扱われる。

URL・ハッシュ値・長いファイル名がこれに当たり、箱の幅を超えても折り返されず、枠の外へはみ出す。

ハイフンの後ろは折り返せる位置になるため、ハイフンを含む文字列は途中で折り返されて見えることがある。

overflow-wrap: anywhere を付けると、収まらないときだけ文字の途中で折り返される。

できない例: 何も指定しない（枠の外へはみ出す）
.box {
  width: 160px;
  margin: 0;
  padding: 8px 10px;
  background: #e0f2fe;
  border: 1px solid #7dd3fc;
  font: 14px/1.7 system-ui;
}
できる例: overflow-wrap: anywhere を付ける
.box {
  width: 160px;
  margin: 0;
  padding: 8px 10px;
  background: #e0f2fe;
  border: 1px solid #7dd3fc;
  font: 14px/1.7 system-ui;
  overflow-wrap: anywhere;
}

break-word は flex の中で効かないことがある

overflow-wrap: break-word も長い文字列を折り返すが、これ以上縮められない幅（min-content）の計算には、折り返せる位置を含めない。

そのため flex や grid の子に使うと、子が長い文字列の幅より縮まず、親の外へはみ出す。

overflow-wrap: anywhere なら折り返せる位置が最小幅の計算に入るので、子は親の幅まで縮む。

break-word のままにするなら、子に min-width: 0 を足す。

できない例: break-word（flex の子が縮まず、はみ出す）
.row {
  display: flex;
  gap: 8px;
  width: 180px;
  padding: 8px 10px;
  background: #e0f2fe;
  border: 1px solid #7dd3fc;
  font: 14px/1.7 system-ui;
}
.dot {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 5px;
  border-radius: 50%;
  background: #0284c7;
}
.msg {
  flex: 1;
  margin: 0;
  overflow-wrap: break-word;
}
できる例: anywhere に変える
.row {
  display: flex;
  gap: 8px;
  width: 180px;
  padding: 8px 10px;
  background: #e0f2fe;
  border: 1px solid #7dd3fc;
  font: 14px/1.7 system-ui;
}
.dot {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 5px;
  border-radius: 50%;
  background: #0284c7;
}
.msg {
  flex: 1;
  margin: 0;
  overflow-wrap: anywhere;
}
できる例: break-word のまま min-width: 0 を足す
.row {
  display: flex;
  gap: 8px;
  width: 180px;
  padding: 8px 10px;
  background: #e0f2fe;
  border: 1px solid #7dd3fc;
  font: 14px/1.7 system-ui;
}
.dot {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 5px;
  border-radius: 50%;
  background: #0284c7;
}
.msg {
  flex: 1;
  margin: 0;
  min-width: 0;
  overflow-wrap: break-word;
}

word-break: break-all は英単語まで切ってしまう

word-break: break-all は、収まらない文字列だけでなく、ふつうの英単語も行末で途中から切る。

スペースで折り返せる文章に使うと読みにくくなる。

overflow-wrap は、スペースで折り返せる位置があればそこで折り返し、どうしても収まらない文字列だけを途中で切る。

できない例: word-break: break-all（単語の途中で切れる）
.box {
  width: 160px;
  margin: 0;
  padding: 8px 10px;
  background: #e0f2fe;
  border: 1px solid #7dd3fc;
  font: 14px/1.7 system-ui;
  word-break: break-all;
}
できる例: overflow-wrap: anywhere（単語のまま折り返される）
.box {
  width: 160px;
  margin: 0;
  padding: 8px 10px;
  background: #e0f2fe;
  border: 1px solid #7dd3fc;
  font: 14px/1.7 system-ui;
  overflow-wrap: anywhere;
}

どれを使うか

迷ったら overflow-wrap: anywhere を選ぶ。

  • overflow-wrap: anywhere: 収まらない文字列だけを折り返す。flex や grid の子でも効く
  • overflow-wrap: break-word: 折り返し方は anywhere と同じで、最小幅の計算だけが違う。使うなら子に min-width: 0 を足す
  • word-break: break-all: 英単語も途中で切る。コード片や固定幅の表示など、読みやすさより収まりを優先する場所だけに使う

折り返さずに 1 行で省略したいときは、text-overflow: ellipsis を使う別のサンプルを選ぶ。

このコードで動いた？