タグ

関連タグで絞り込む (1)

タグの絞り込みを解除

cssとline-clampに関するokyawaのブックマーク (1)

  • 複数行テキストの末尾省略を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; メリット - 少ない行数で実現できる - 幅が可変でも変な隙間ができたりせず綺麗に表示できる デメリット

    複数行テキストの末尾省略をCSSのみで実現する - Qiita
  • 1