-webkit-line-clampを指定してoverflow: hidden;にすれば省略された文字は見えなくなると思っていたが表示領域にpaddingが指定されていると省略された部分がpaddingの部分に表示されちゃうな

CSSは以下の通りです！ コピペして使ってください！ overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3;

＼ CSSだけで文字数制限 ／ 3行だけ表示して、 4行目以降は非表示 ができるよ！ 👇これを書けばOK overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; めっちゃよく使うのに、一生このコード覚えられないから、スニペット登録してます🙋‍♀️ pic.twitter.com/mpmDgc2dqP

❌実際は前-webkit-line-clampで ⭕実際は-webkit-line-clampで

一般ユーザのポストでも「さらに表示」で切られてしまう件 実際は前-webkit-line-clampで表示を10行までにしているようで、この値を20とかにしておけば表示される なお有料垢の機能？で任意位置に「さらに表示」を設定しているような場合はそもそもTLでは読み込まれていない pic.twitter.com/8SIqp2mFDV

CSSで -webkit-line-clamp: 2; を指定してもどうしてもSafariで1行分しか表示されなかった（Chromeではきちんと2行分表示されていた）の、ずっと困っていたけど中に display: inline-block; 指定された要素があったからだった。解決。