# text-overflow

> 要素からはみ出したテキストの表示方法を指定するプロパティです。ellipsis（...）で省略表示したり、clip（切り取り）したりできます。white-space: nowrapやoverflowと組み合わせて使用します。

- カテゴリ: テキスト・フォント
- URL: https://www.css-dictionary.com/property/text-overflow/

## 構文

```css
text-overflow: clip | ellipsis | <string>
```

## Tailwindでは

- `truncate` → overflow: hidden + text-overflow: ellipsis + white-space: nowrap
- `text-ellipsis` → text-overflow: ellipsis
- `text-clip` → text-overflow: clip
- 補足: 1行省略は truncate 1つで3点セットが揃う。

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 1+ / Firefox 7+ / Safari 1.3+ / Edge 12+

## コード例

### 例1: 長いテキストを「...」で省略表示

```css
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
```

### 例2: カスタム文字で省略表示

```css
text-overflow: '→';
```

## TIPS

white-space: nowrapとoverflow: hiddenとセットで使用。

## AIがよく間違えるポイント

text-overflow: ellipsisは単独では動きません。overflow: hidden + white-space: nowrapとの三点セットが必須で、AIはこのセットを崩した不完全なコードを出すことがあります。複数行の省略は別の仕組み（-webkit-line-clamp）で、これもdisplay: -webkit-box等との定型セットが必要です。

## AIへの依頼文例

- カードタイトルを1行省略（...）にして。必要な3点セットを漏れなく
- 本文を3行で省略したい。line-clampの定型セットで実装して

## 関連プロパティ

- [white-space](https://www.css-dictionary.com/property/white-space.md)
- [overflow](https://www.css-dictionary.com/property/overflow.md)