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の省略形として定義されており、前者は勧告候補で削除される危険性があ

[coliss]

テキストを省略表示する際に、文末を3点リーダーにするline-clampプロパティの効果的な実装方法。

[usaribon]

知られていないのでなくIEのせいで使えないが正。　absoluteで代替の表示するやつって見た目上なんか変で嫌がられるし

[toblog]

まじでIEふざけんなよ。追記:プログレッシブエンハンスメントはクライアントとの折衝次第なのでここで出す話じゃない。

[masayoshinym]

IEさえなきゃ使ってるよ。

[ultimatebreak]

プログレッシブエンハンスメントの話出してるのは、自社プロダクトしか作ったことないお方かな？まあ最近は古いブラウザについてそこまで固執されることはなくなったが

[bocuno]

昔よくIEのために無茶なjs書いたなぁ

[tsuki-rs]

結局IEなんだよなぁ。プログレッシブ・エンハンスメント云々の問題じゃないんだよ。

[webmugi]

指定行数を超えたら3点

[field_combat]

レイアウトにも関係するからIEだけダメってわけにもいかんか。割とIEを無視できるようになったけど。

[table]

成果物がtoBならIE対応必須、jQueryゴリゴリで作るなぁ。最新の技術や仕様に沿うよりクライアントの利益の方が大事

[kadzuya]

cssだけで古いブラウザ対応出来たらpostcssで出来て良いだろうね。 参考 https://codepen.io/jaswrks/pen/HfLFA

[s025236]

知らなかった。Edge,chrome,safari(iOS含)でまともに見えて出来ればfirefoxでも動けば良いかな？って気がしてきてるのでこれはよさそう。

[flirt774]

1行の場合はtext-overflow: ellipsisが使える。line-clumpはスマホのみ

[mayumayu_nimolove]

めんどくさいからsvgにしてる

[poponponpon]

え、まだIE対応とかしてるもんなの？

[itochan]

漢字対応？

[ryousanngata]

折り返しを止めたり、幅を固定にしたりで、コンテンツの幅計算の都合を考えると納得だけど直感的に使えなくて微妙だなと感じた記憶がある

[benridane111]

line-clampって長い一行場合には効かなくて苦戦したような。