CSSのtext-overflowプロパティ：使いこなせる完全ガイド

CSSの「text-overflow」プロパティは、要素内に収まりきらないテキストがどのように処理されるかを制御します。具体的には、以下の3つの動作を指定できます。

1. クリップ
   はみ出したテキストを切り捨てる
2. 省略記号
   省略記号（"..."）を表示する
3. カスタム文字列
   独自の文字列を表示する

主に、以下の状況で使用されます。

• 特定の文字列でテキストを終わらせたい場合
• 複数行のテキストを1行に収めたい場合
• 横幅に制限のあるコンテナ内に長いテキストを配置する場合

構文

text-overflow: clip | ellipsis | none | <custom-string>;

• <custom-string>: 独自の文字列をカンマ区切りで複数指定可能
• none: デフォルトの動作（何も表示しない）
• ellipsis: 省略記号（"..."）を表示する
• clip: はみ出したテキストを切り捨てる

省略記号の表示例

.example {
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.example::after {
  content: "...";
}

この例では、.example要素内のテキストが100pxを超えた場合、省略記号（"..."）が表示されます。

カスタム文字列の表示例

.example {
  width: 100px;
  overflow: hidden;
  text-overflow: "[続きを読む]";
}

.example::after {
  content: "[続きを読む]";
}

この例では、.example要素内のテキストが100pxを超えた場合、「[続きを読む]」という文字列が表示されます。

注意点

• カスタム文字列は、適切な長さのものを使用する必要があります。
• 省略記号の位置はブラウザによって異なる場合があります。
• 省略記号やカスタム文字列は、要素の後ろに疑似要素として追加されます。そのため、::afterセレクタなどでスタイルを調整することができます。

• ネタバレを隠す
• 長いタイトルを省略して表示する
• ボタンやリンクのテキストを簡潔に表示する

---

省略記号を使用して長い見出しを省略する

<div class="heading">
  長い見出しがここに記載されます
</div>

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

カスタム文字列を使用して「続きを読む」リンクを表示する

<p class="text">
  長い文章がここに記載されます。
</p>

.text {
  width: 300px;
  overflow: hidden;
  text-overflow: "[続きを読む]";
  white-space: nowrap;
}

.text::after {
  content: "[続きを読む]";
  color: blue;
  text-decoration: underline;
}

<div class="vertical-text">
  長い文章がここに記載されます。
</div>

.vertical-text {
  height: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

---

white-spaceプロパティ

"white-space"プロパティは、要素内の空白の処理方法を制御します。主に以下の3つの値が使用されます。

• pre-wrap: テキストを必要に応じて改行しますが、空白はそのまま表示します。
• pre: テキストの改行と空白をそのまま表示します。
• nowrap: テキストを1行に収め、改行を抑制します。

これらの値を組み合わせることで、"text-overflow"プロパティと同様の効果を得ることができます。

例

.example {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 代替として使用 */
}

注意点

• 古いブラウザでは、pre-wrapプロパティがサポートされていない場合があります。
• white-spaceプロパティは、テキストの折り返しのみを制御します。省略記号などの装飾は自分で用意する必要があります。

displayプロパティ

"display"プロパティは、要素の表示形式を制御します。主に以下の2つの値が使用されます。

• block: 要素をブロック要素として表示します。他の要素の上に新しい行として配置されます。
• inline: 要素をインライン要素として表示します。他の要素と行内での配置が可能になります。

これらの値を組み合わせることで、テキストを必要な場所に配置し、はみ出しを防ぐことができます。

例

.example {
  display: inline-block;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis; /* 代替として使用 */
}

注意点

• displayプロパティは、要素の構造を変更する可能性があります。レイアウトに影響を与える可能性があるため、注意して使用する必要があります。

JavaScriptを使用することで、より動的な処理を実現することができます。例えば、以下のことが可能です。

• クリック時に、省略された部分をモーダルウィンドウなどで表示する
• カスタムの省略記号を表示する
• テキストの長さに応じて、省略記号の表示を切り替える

例

<div id="text">
  長い文章がここに記載されます。
</div>

<script>
  const textElement = document.getElementById('text');
  const maxLength = 100; // 省略する最大文字数

  if (textElement.textContent.length > maxLength) {
    const truncatedText = textElement.textContent.substring(0, maxLength) + '...';
    textElement.textContent = truncatedText;

    const readMoreButton = document.createElement('button');
    readMoreButton.textContent = '続きを読む';
    readMoreButton.addEventListener('click', () => {
      alert(textElement.textContent); // 省略された部分をモーダルウィンドウなどで表示
    });

    textElement.parentNode.appendChild(readMoreButton);
  }
</script>

この例では、#text要素内のテキストが100文字を超えた場合、省略記号（"..."）と「続きを読む」ボタンが表示されます。「続きを読む」ボタンをクリックすると、省略された部分がアラートウィンドウで表示されます。

• 複雑な処理を行う場合は、パフォーマンスやアクセシビリティなどに考慮する必要があります。
• JavaScriptを使用するには、プログラミングの知識が必要です。