複数行テキストの末尾省略をCSSのみで実現する - Qiitaやりたいこと 複数行テキストの末尾を…（3点リーダー）で省略したい。 このとき、JavaScriptを使わずCSSだけで実現したい。 なんでCSSだけで？ JavaScriptで末尾省略する方法だとある程度の行数のコードを書かないといけない。 また、ライブラリを使う方法もあるが、バージョンアップやjQuery依存など考慮するべき点がいくつかある。 CSSで実現できれば上記のような心配が少なく、保守性を維持しやすいかと思いCSSだけで実現する方法を探した。 実現方法 CSS line-clamp を使う display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; メリット - 少ない行数で実現できる - 幅が可変でも変な隙間ができたりせず綺麗に表示できる デメリット
