Webデザイナー必見！長い単語をレイアウトするテクニック集

2024-07-27

長い単語が div を壊さないようにするには？

単語の折り返し

CSS プロパティ word-break を使用することで、長い単語を自動的に折り返すことができます。

.my-div {
  word-break: break-all;
}

word-break プロパティには以下の値を設定できます。

normal: 単語は途中で折り返されません。
break-all: 単語はスペースで区切って折り返されます。
break-word: 単語は文字ごとに折り返されます。
keep-all: 単語は途中で折り返されず、次の行に移動します。

ハイフンによる分割

長い単語をハイフンで分割することで、div の幅内に収めることができます。

.my-div {
  hyphens: auto;
}

none: ハイフンは挿入されません。
manual: ハイフンは手動で挿入されます。
auto: 長い単語は自動的にハイフンで分割されます。

文字サイズ調整

長い単語が目立たないように、文字サイズを調整することもできます。

.my-div {
  font-size: 14px;
}

単語の省略

長い単語を省略し、 "..." などで代替することもできます。

.my-div {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

flexbox の使用

flexbox を使用することで、div の幅を柔軟に調整できます。

.my-div {
  display: flex;
  flex-wrap: wrap;
}

CSS Grid の使用

CSS Grid を使用することで、div を細かくレイアウトできます。

.my-div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>長い単語を折り返す</title>
  <style>
    .my-div {
      /* 単語の折り返し */
      word-break: break-all;
      /* ハイフンによる分割 */
      hyphens: auto;
      /* 文字サイズ調整 */
      font-size: 14px;
      /* 単語の省略 */
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      /* flexbox の使用 */
      display: flex;
      flex-wrap: wrap;
      /* CSS Grid の使用 */
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }
  </style>
</head>
<body>
  <div class="my-div">
    これは非常に長い単語であり、div の幅を超えてはみ出す可能性があります。
  </div>
</body>
</html>

注意:

上記のコードはサンプルです。実際の使用には、必要に応じて調整する必要があります。
すべての方法がすべてのブラウザでサポートされているわけではありません。使用する前にブラウザの互換性を確認してください。

word-wrap プロパティは、長い単語を次の行に自動的に折り返すために使用できます。ただし、このプロパティはすべてのブラウザでサポートされているわけではありません。

.my-div {
  word-wrap: break-word;
}

white-space プロパティ

white-space プロパティを使用して、単語間のスペースを制御できます。

.my-div {
  white-space: nowrap;
}

text-align プロパティ

text-align プロパティを使用して、テキストの配置を調整できます。

.my-div {
  text-align: justify;
}

JavaScript の使用

JavaScript を使用して、長い単語を検出して折り返すことができます。

function wrapLongWords(element) {
  const words = element.textContent.split(' ');
  for (const word of words) {
    if (word.length > 20) {
      element.innerHTML = element.innerHTML.replace(word, `${word}<br>`);
    }
  }
}

const myDiv = document.querySelector('.my-div');
wrapLongWords(myDiv);