Edited at

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

More than 1 year has passed since last update.


単数行の場合

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