CSSのtext-overflowでテキストのはみ出しを制御する方法をわかりやすく解説

2024.09.15
スポンサーリンク

text-overflowプロパティは、要素の内容が指定されたボックスに収まりきらないとき、どのように表示するかを指定します。このプロパティは、主に文字列が長すぎる場合に「省略記号」や「クリップ」などで表示を調整するのに使われます。

スポンサーリンク

text-overflowの値とその効果の一覧

  • clip: 溢れたテキストをクリップし、表示しません。
  • ellipsis: 溢れたテキストの最後に省略記号（…）を表示します。

注意点と関連情報

text-overflowは、必ずwhite-space: nowrap;とoverflow: hidden;と一緒に使用されます。これらのプロパティがないと、テキストが改行されてしまい、text-overflowの効果が発揮されません。

text-overflowが効かない時の原因と対策

white-spaceが適切に設定されていない

text-overflowは、テキストがボックスをはみ出す際にどのように表示されるかを制御するプロパティですが、white-spaceプロパティが適切に設定されていないと効果が現れません。特に、white-space: nowrap;が設定されていないと、テキストが折り返されてしまい、text-overflowの効果が見えなくなります。

対策: white-space: nowrap;を設定し、テキストが折り返されないようにします。例えば、white-space: nowrap; text-overflow: ellipsis;のように指定して、テキストがボックスをはみ出す場合に省略記号（…）を表示させます。

インライン要素に適用されている

text-overflowは、ブロックレベルまたはインラインブロックの要素に適用されます。インライン要素（<span>, <a>など）に適用しても効果は現れません。

対策: インライン要素にdisplay: inline-block;やdisplay: block;を指定して、text-overflowが機能するようにします。例えば、<span style="display: inline-block; text-overflow: ellipsis;">のように指定します。

共通するCSSコード

.css-sample-container {
  padding: 20px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  background-color: #f9f9f9;
}

.css-sample-text {
  overflow:hidden;
  white-space: nowrap;
  width: 300px;
  border: 1px solid #999;
  padding: 10px;
  font-size: 16px;
}

text-overflow: clip

テキストがボックスに収まりきらないとき、クリップして表示します。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-clip">
    これはtext-overflow: clip; の表示例です。長すぎるテキストはクリップされます。
  </div>
</div>

CSSコード

.css-sample-text-clip {
  text-overflow: clip;
}

表示結果

これはtext-overflow: clip; の表示例です。長すぎるテキストはクリップされます。

text-overflow: ellipsis

テキストがボックスに収まりきらないとき、省略記号（…）を表示します。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-ellipsis">
    これはtext-overflow: ellipsis; の表示例です。長すぎるテキストは省略記号で切り捨てられます。
  </div>
</div>

CSSコード

.css-sample-text-ellipsis {
  text-overflow: ellipsis;
}

表示結果

これはtext-overflow: ellipsis; の表示例です。長すぎるテキストは省略記号で切り捨てられます。

まとめ

  • text-overflowは、要素内のテキストが溢れる場合の表示方法を制御します。
  • 「clip」は、溢れた部分をクリップして表示しません。
  • 「ellipsis」は、省略記号（…）を使って溢れた部分を表示します。
  • text-overflowを使用するには、white-space: nowrap;とoverflow: hidden;が必須です。
スポンサーリンク