三点リーダーの実装を爆速でやってみる

三点リーダーとは

三点リーダーとは、「文章を省略する意味」と「文章に余韻を持たせたり沈黙を表現したりする意味」で使われる特殊記号です。

index.html

<div class="mod" style="width: 300px">
        <p class="text">
          ああああああああああああああああああああああああああああああああああああああああああああああああああ
        </p>
      </div>

こちらのhtml上で横幅を300pxにしています。ここの部分を各々設定して、下記のCSSを当ててみてください。

style.css

.text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

このようにしてcssを当てれば、すぐに実装できます。
ぜひ参考にしてみてください。

参考サイト