text-overflowではみ出した文字を省略する【CSS】

text-overflowはボックスに文章が収まらないときに表示方法をどうするか指定するプロパティです。

基本的にブロックレベルの要素で使われるプロパティで、その要素に指定されているoverflowプロパティの値がhiddenのときに意味を持つプロパティです。

text-overflowの指定方法

overflowプロパティでhiddenが指定されている場合、それはボックスに収まらない内容は表示しないことを意味します。

そういったときにtext-overflowプロパティを指定することで、省略記号を表示することもできます。

clipを指定すると、ボックスに収まらない文章は切り取られてしまいます。

ellipsisを指定することで、ボックスに収まらない文章はclipを指定したときと同様切り取られるのですが、切り取られた部分には省略記号（…）が表示されます。

文章が長すぎると枠に収まらないのです。

　
このような感じですね。枠線で囲われたボックスに「文章が長すぎると枠に収まらないのです。」という文章を記述しているのですが、その文章が収まらずに、「の」以降は省略されているのがわかります。