More than 5 years have passed since last update.

入らなかった文字を三点リーダで省略表示

Last updated at 2017-06-23Posted at 2017-06-16

単数行の場合

text-overflow: ellipsisを使います。
親要素でwidthを指定し、overflow: hiddenで表示を消して、text-overflow: ellipsisで三点リーダー表示。
改行をさせたくないので、white-space: nowrap指定です。

sample.html

<div class="content">
  <p>長すぎて入りきらなかったテキストが入ります。</p>
</div>

sample.sass

.content
  overflow: hidden
  width: 100%
  p
    overflow: hidden
    text-overflow: ellipsis
    white-space: nowrap

エリア外を表示しない
overflow: hidden

切り取られたテキストの代わりに「…」をい表示
text-overflow: ellipsis

自動的に改行しない
white-space: nowrap