CSS テキスト省略(...)/line-clamp ジェネレーター
1行の「...」から複数行の line-clamp まで、コードを自動生成
1行の省略表示(text-overflow: ellipsis)から複数行の line-clamp まで、コピーするだけで使えるCSSを自動生成します。
도구를 불러오는 중…
🔒 すべてブラウザ内で処理されます。アップロードしたファイルや入力内容がサーバーに送信されることはありません。
使い方
- 表示したい行数をスライダーで選びます。
- 生成されたCSSコードをコピーします。
よくある質問
- すべてのブラウザで動作しますか？
- はい。標準化された `-webkit-line-clamp` プロパティを使用しているため、主要な最新ブラウザで問題なく動作します。
- 1行の場合と複数行の場合でコードは違いますか？
- はい。1行は `text-overflow: ellipsis` と `white-space: nowrap` の組み合わせ、2行以上は `-webkit-line-clamp` と `display: -webkit-box` の組み合わせになり、行数に応じて最適なコードが自動生成されます。
- 省略された部分にマウスを乗せたら全文を表示できますか？
- CSSだけでは表示できません。`title` 属性を追加するか、別途ツールチップのスクリプトを組み合わせる必要があります。