まとめ：text-overflow プロパティを使いこなして、見やすく機能的なWebサイトを作ろう！

CSS Miscellaneous: text-overflow プロパティ

text-overflow プロパティは、要素内に収まりきらなかったテキストをどのように表示するかを制御します。これは、長いタイトルや文章を扱う際に、見やすくするために役立ちます。

値:

• ellipsis: 省略記号（…）を表示します。これがデフォルト値です。
• clip: テキストを単純に切り取ります。省略記号は表示されません。
• line-clamp: テキストを指定した行数で制限します。

例:

• 省略記号を表示:

.title {
  text-overflow: ellipsis;
  width: 200px;
}

• テキストを切り取る:

.description {
  text-overflow: clip;
  width: 100px;
}

• テキストを2行で制限:

.paragraph {
  text-overflow: line-clamp;
  -webkit-line-clamp: 2;
  -moz-line-clamp: 2;
  line-clamp: 2;
}

補足:

• text-overflow プロパティは、overflow プロパティと組み合わせて使用できます。
• line-clamp は、WebKit ブラウザ (Chrome、Safari など) と Firefox でのみサポートされています。他のブラウザでは、-webkit-line-clamp および -moz-line-clamp を併用する必要があります。
• text-overflow プロパティは、テキストだけでなく、インライン要素にも適用できます。

CSS text-overflow サンプルコード

省略記号

<div class="title">
  これは長いタイトルです。
</div>

.title {
  width: 200px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

"これは長いタイトルです。" が "..." で省略されます。

テキストの切り取り

<div class="description">
  これは長い文章です。とても長い文章です。
</div>

.description {
  width: 100px;
  text-overflow: clip;
  white-space: nowrap;
  overflow: hidden;
}

結果:

"これは長い文章です。" が "これは長い文章" で切り取られます。

テキストの行制限

<div class="paragraph">
  これは長い文章です。
  とても長い文章です。
  さらに長い文章です。
</div>

.paragraph {
  width: 200px;
  text-overflow: line-clamp;
  -webkit-line-clamp: 2;
  -moz-line-clamp: 2;
  line-clamp: 2;
}

結果:

"これは長い文章です。" と "とても長い文章です。" の2行のみが表示されます。

• 省略記号の種類:

.title {
  text-overflow: ellipsis;
  overflow: hidden;
  text-overflow-style: ellipsis; /* 省略記号の種類 */
}

.title:hover {
  text-overflow-style: none; /* ホバー時に省略記号を非表示 */
}

• 複数行の省略:

.paragraph {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

• テキストの配置:

.title {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-align: right; /* テキストを右揃え */
}

text-overflow 以外の方法

white-space プロパティを使用して、テキストの折り返し方法を制御できます。

• normal: テキストを折り返します。
• nowrap: テキストを折り返しません。
• pre: テキストを空白文字で区切って折り返します。
• pre-wrap: テキストを単語で区切って折り返します。

例:

<div class="title">
  これは長いタイトルです。
</div>

.title {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
}

結果:

"これは長いタイトルです。" が1行で表示されます。

overflow プロパティを使用して、テキストが要素からはみ出した場合の表示方法を制御できます。

• visible: はみ出したテキストを表示します。
• hidden: はみ出したテキストを隠します。
• scroll: はみ出したテキストにスクロールバーを表示します。

例:

<div class="description">
  これは長い文章です。とても長い文章です。
</div>

.description {
  width: 100px;
  overflow: scroll;
}

結果:

"これは長い文章です。" がスクロールバー付きで表示されます。

JavaScriptを使用して、テキストを動的に処理することもできます。

例:

<div id="text"></div>

<script>
const text = document.getElementById("text");
const longText = "これは長い文章です。とても長い文章です。さらに長い文章です。";

if (text.offsetWidth < text.scrollWidth) {
  text.textContent = longText.substring(0, 100) + "...";
} else {
  text.textContent = longText;
}
</script>

結果:

"これは長い文章です。" が "..." で省略されます。

• 見た目を重視する場合: text-overflow プロパティ
• 機能性を重視する場合: overflow プロパティ
• 複雑な処理が必要な場合: JavaScript

それぞれの方法の特徴を理解して、適切な方法を選びましょう。