text-overflow

テキストオーバーフロー（テキストとフォント）

意味テキストが要素のボックスを超えた時の挙動

text-overflowとは？

text-overflowプロパティは、テキストが親要素のボックスに収まりきらない場合に、どのように表示するかを指定するプロパティです。通常、'ellipsis'（省略記号）や'clip'（切り取り）の値を使用して、テキストがはみ出した時に省略記号を表示するか、単純に切り取るかを選択します。

text-overflowの具体的な使い方

テキストの省略表示の例

<style>
    p {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>

<p>このテキストは親要素を超えると省略されます。</p>

p要素内のテキストが親要素の幅を超えた場合に、省略記号を表示します。

テキストの切り取り表示の例

<style>
  .clip {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    width: 200px;
  }
</style>

<div class="clip">
  このテキストは200pxを超えると切り取られます。
</div>

text-overflow: clipを使用して、テキストが指定幅を超えた場合に切り取られるように設定します。

text-overflowに関するよくある質問

Q. text-overflowの主な用途は？

A. text-overflowの主な用途は、テキストが要素の幅を超えた場合の表示方法を制御することです。特に、省略記号（...）を表示してテキストが切り詰められたことを示すために使用されます。

Q. ellipsisと clipの違いは？

A. ellipsisは、テキストが切り詰められた場合に省略記号（...）を表示します。一方、clipは単純にテキストを切り取り、何も表示しません。ellipsisは読者にテキストが続いていることを示すのに対し、clipは視覚的な手がかりを提供しません。

Q. text-overflowを使う際の注意点は？

A. text-overflowを効果的に使用するには、overflow: hiddenとwhite-space: nowrapも一緒に設定する必要があります。これにより、テキストが折り返されずに隠れ、text-overflowの効果が現れます。また、要素の幅も明示的に設定する必要があります。

text-overflowが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのtext-overflowやfont-variant、font-kerning、text-shadow、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。