要素からはみ出したテキストの表示方法を指定するプロパティです。ellipsis(...)で省略表示したり、clip(切り取り)したりできます。white-space: nowrapやoverflowと組み合わせて使用します。
text-overflow: clip | ellipsis | <string>| truncate | overflow: hidden + text-overflow: ellipsis + white-space: nowrap |
| text-ellipsis | text-overflow: ellipsis |
| text-clip | text-overflow: clip |
1行省略は truncate 1つで3点セットが揃う。
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}長いテキストを「...」で省略表示
text-overflow: '→';カスタム文字で省略表示
white-space: nowrapとoverflow: hiddenとセットで使用。
text-overflow: ellipsisは単独では動きません。overflow: hidden + white-space: nowrapとの三点セットが必須で、AIはこのセットを崩した不完全なコードを出すことがあります。複数行の省略は別の仕組み(-webkit-line-clamp)で、これもdisplay: -webkit-box等との定型セットが必要です。
カードタイトルを1行省略(...)にして。必要な3点セットを漏れなく
本文を3行で省略したい。line-clampの定型セットで実装して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。