【PHPなし】CSSで長い文字列を省略！末尾を三点リーダー[…]にし崩れ防止する

動的に記事を出力するとき、通常であればPHPを使って文字列を省略してきました。しかしPHPがわからない、仕事でシステムの人に頼むのも面倒。そのような人に持って来いなのが今回の省略技です。なんとCSSを使って文字列を省略することができるのです。今回はこの方法をご紹介します。

text-overflow

このプロパティは、ボックスに収まらない文章の表示方法を指定できます。そして表示方法を「ellipsis」に指定するとはみ出して表示されない文字列を省略します。

使用方法

省略したい文字列の要素にクラス「is-text-overflow」を追加するだけ。

html

<div class="Contents">
  <div class="Container">
    <div class="Container__text is-text-overflow">
      長い長い長い長い長い文字列を省略します。
      長い長い長い長い長い文字列を省略します。
      長い長い長い長い長い文字列を省略します。
    </div>
  </div>
</div>

CSS

.Container {
  width: 300px;
  margin: 30px;
  padding: 30px;
  border: 1px solid #666;
}
.is-text-overflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

SCSS

.Container{
    width: 300px;
    margin: 30px;
    padding: 30px;
    border:1px solid #666;
}
.is-text-overflow{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}