【CSS】複数行の長いテキストを三点リーダーで省略する

複数行というところがポイントです。
昔は文字数をカウントして自力でカットしていた老人ですが、
今はCSSだけでできるんですね。面白いなあ。

<style>
.box1 {
  width: 300px;
  border: solid 1px #c0c0c0;
  overflow: hidden;
}
.box1 .text1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
</style>

<div class="box1">
<div class="text1">
複数行というところがポイントです。
昔は文字数をカウントして自力でカットしていた老人ですが、
今はCSSだけでできるんですね。面白いなあ。
</div>
</div>

<style>

.box1 {

width: 300px;

border: solid 1px #c0c0c0;

overflow: hidden;

}

.box1 .text1 {

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

}

</style>

複数行というところがポイントです。

昔は文字数をカウントして自力でカットしていた老人ですが、

今はCSSだけでできるんですね。面白いなあ。

</div>

これが当たり前になっていると単なる作業ですが
昔の苦労した時代を知っていると
こういうテクニック1つ1つが面白いと思えてきます。

関連記事