CSSテキスト省略ジェネレーター
1行・複数行のテキスト省略CSSをプレビュー付きで生成
도구를 불러오는 중…
🔒 すべてブラウザ内で処理されます。アップロードしたファイルや入力内容がサーバーに送信されることはありません。
このツールは、長いテキストを省略記号(…)で切り詰めるCSSコードを生成します。text-overflowを使った1行省略と、-webkit-line-clampを使った複数行省略の両方に対応しています。カードのタイトルや一覧、プレビュー文などを一定の高さに収めたい開発者・デザイナーに便利で、すべての処理はブラウザ内で完結し、テキストがサーバーに送信されることはありません。
使い方
- 省略の種類(1行 または 複数行)を選択する
- 複数行の場合はスライダーで最大行数を設定する
- コンテナの幅を調整しながらライブプレビューを確認する
- 生成されたCSSコードをワンクリックでコピーする
よくある質問
- -webkit-line-clampはすべてのブラウザで使えますか?
- Chrome、Edge、Safari、Firefoxなど主要なモダンブラウザでサポートされていますが、元々WebKit系のプレフィックス付きプロパティなので、古いブラウザ向けには代替表示を用意すると安心です。
- 1行省略と複数行省略の違いは何ですか?
- 1行省略はoverflow、text-overflow、white-spaceでテキストを1行に制限して切り詰めます。複数行省略は-webkit-line-clampを使い、指定した行数を超えた部分を省略記号付きで隠します。