単数行の場合
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