text-overflow: ellipsis の複数行版
◆ line-clamp
◆ -webkit プレフィックスつけるけど Firefox でも動く
◆ -webkit プレフィックスつけるけど Firefox でも動く
そろそろ Edge も Chromium 版だし複数行の ... はこれで良さそうです
-webkit ついてるけど Firefox も対応してます
注意点に padding つけると隠れてるはずの部分が見えてしまうというのがあります
あくまで ... をつけて height を調整してくれるだけで それ以降を非表示にはしません
overflow: hidden でも div の内側の padding 領域は見えるのでそこに ... の次の行が見えます
padding をつけたいなら padding をつけた要素の内側に padding なし要素を作ってそれに line-clamp の設定すると良いです
<!doctype html>
<style>
div {
margin: 10px;
background: #cfa;
width: 300px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
</style>
<div id="div"></div>
<script>
div.innerHTML = "a ".repeat(100)
</script>
-webkit ついてるけど Firefox も対応してます
注意点に padding つけると隠れてるはずの部分が見えてしまうというのがあります
あくまで ... をつけて height を調整してくれるだけで それ以降を非表示にはしません
overflow: hidden でも div の内側の padding 領域は見えるのでそこに ... の次の行が見えます
<!doctype html>
<style>
div {
margin: 10px;
background: #cfa;
width: 300px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
padding: 1em;
}
</style>
<div id="div"></div>
<script>
div.innerHTML = "a ".repeat(100)
</script>
padding をつけたいなら padding をつけた要素の内側に padding なし要素を作ってそれに line-clamp の設定すると良いです