＼ 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

#web制作 #学習メモ 【💡複数行に収まらない文字を[...]で省略表示】 ↓ display: -webkit-box; -webkit-line-clamp: 3;（行数） -webkit-box-orient: vertical; overflow: hidden; ※heightやpaddingで指定行数よりも大きい高さがあると、[...]後も文章が続くので注意

CSS小技✨ clampをfont-sizeではなく文字数で制限し 12行以降を３点リーダー表示する🎶 width: clamp(23ch, 50%, 40ch); -webkit-line-clamp: 12; 1️⃣要素の幅が23文字より小さい→23文字に設定 2️⃣要素の幅が50%より大きい→50%に設定 3️⃣上記2つの条件を満たさない←40文字に設定 #Codejump #デイトラ pic.twitter.com/wUKWMJG5Y8