CSS テキスト省略（三点リーダー）ジェネレーター
1行・複数行のテキスト省略（ellipsis）CSSをリアルタイムプレビュー付きで生成
長いテキストを三点リーダー（…）できれいに省略するCSSコードを生成するツールです。text-overflow を使った1行省略と、-webkit-line-clamp を使った複数行省略の両方に対応しています。カードのタイトルやリスト、抜粋テキストなどの高さを揃えたいエンジニア・デザイナーの方に役立ちます。処理はすべてブラウザ内で完結するため、テキストがサーバーに送信されることはありません。
도구를 불러오는 중…
🔒 すべてブラウザ内で処理されます。アップロードしたファイルや入力内容がサーバーに送信されることはありません。
使い方
- 省略の種類（1行／複数行）を選びます
- 複数行の場合は、スライダーで最大行数を設定します
- コンテナの幅を調整しながらリアルタイムプレビューで確認します
- 生成されたCSSコードをボタン1つでコピーします
よくある質問
- -webkit-line-clamp はすべてのブラウザで動作しますか？
- Chrome、Edge、Safari、Firefox など主要なモダンブラウザで対応していますが、もともとWebKitのベンダープレフィックス由来のプロパティです。古いブラウザにも対応する必要がある場合は、代替スタイルを併せて検討することをおすすめします。
- 1行省略と複数行省略はどう違いますか？
- 1行省略は overflow、text-overflow、white-space の各プロパティでテキストを1行に制限して切り詰めます。複数行省略は -webkit-line-clamp で指定した行数を超えた部分を三点リーダーとともに隠します。
- コンテナによっては、複数行の文字数省略(line-clamp)が適用されないケースもありますか?
- はい、-webkit-line-clampはdisplay: -webkit-boxと組み合わせて初めて正しく動作します。親要素がflexやgridコンテナだったり、コンテナの幅が明確に指定されていなかったりすると、改行の基準が崩れて省略表示がうまく適用されない場合があります。このツールが生成するコードのdisplayプロパティは、独自に変更しないことをおすすめします。