[ css ] 長い文章をcssで省略する

css

cssだけで文末に「…」をつけて文章を省略する方法。
行単位なので、文字数で省略することはできません。

HTML
<div class="box">
  <p class="inner">省略したい文章</p>
</div>
1行の文章を省略するcss
.inner{
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
複数行の文章を省略するcss
.box{
  background-color: #eee;
  width: 500px;
  overflow: hidden;
}
.inner{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 表示したい行数 */
}

↓結果

省略したい文章が入っているタグ（ここではpタグ）の親にoverflow: hidden;を設定。

使用上の注意
  • -webkit-とある通り、ChromeとSafariでしか機能しません。
  • 親のタグ、省略したい文章が入っているタグにpadding-bottomを設定すると指定した行より多く表示されます。
  • 省略したい文章が入っているタグにmargin-bottomを設定すると指定した行より多く表示されます。
  • 親のタグ、省略したい文章が入っているタグにtext-align: justify;を設定するとiPhoneのSafariで「…」が最後の文字にめり込みます。