line-clampプロパティの効果的な実装方法、CSSで文末を3点リーダーで省略表示する
テキストを省略表示する際に、文末を3点リーダーにするline-clampプロパティの効果的な実装方法を紹介します。数行のスタイルシートで、簡単に実現できます。 line-clamp 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 line-clampプロパティとは line-clampプロパティの仕様 text-overflowでこれを実現できますか？ 実装の注意点 line-clampプロパティのサポートブラウザ リソース line-clampプロパティとは CSSのline-clampプロパティは、テキストを指定した行数で省略します。 2019年現在、Editors Draftなので、仕様は確定ではありませんが、max-linesとblock-overflowの省略形として定義されており、前者は勧告候補で削除される危険性があ
text-overflow: ellipsisが上手く動作しない？ 解決してあげよう。 - Qiita
まず、text-overflow: ellipsisとは、オーバーした分の文字列を...で省略してくれるというものです。 詳しくはMDN web docs: text-overflowを参照してください。 前提条件 まず、text-overflow: ellipsisを有効にするためには、以下のプロパティ達を設定する必要があります。 .over-text { /* オーバーした要素を非表示にする*/ overflow: hidden; /* 改行を半角スペースに変換することで、1行にする */ white-space: nowrap; /* 幅を指定しないとテキストの長さによって要素の幅が変わるため指定 */ width: 120px; /* オーバーしたテキストを３点リーダーにする */ text-overflow: ellipsis; } text-overflow: ellipsis
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
