CSSで要素の外にはみ出た文字を…と表記する方法

今回はCSSで要素の外にはみ出た文字を…と表記する方法を紹介します。

要素の外に出たときに…と表記できるので、文字数やテキストの大きさに左右されることなく実装することができます。レイアウトが崩れる心配もありません。

 

要素の外にはみ出た文字を…と表記する方法

以下のCSSを指定します。

p.overflow {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

上の例では要素の幅を200pxにしていますが、これは好きに変更して構いません。

今回でいえば200pxの要素からはみ出ると…と表記されるようになります。

 

プロパティの解説

white-spaceはホワイトスペース(空白)に関するプロパティです。nowrapを指定すると要素の幅いっぱいになっても文字を折り返さずに、そのままはみ出て表示します。

overflowは要素からはみ出た部分をどう表示するかを指定するプロパティです。hideenを指定すると親要素からはみ出た子要素は表示されなくなります。

text-overflowは要素からはみ出た文章をどうするか指定するプロパティです。ellipsisを指定するとはみ出た文章は切り取られ、…と表示されます。

 

これら3つのプロパティをセットで使うことでCSSだけではみ出た文字を…と表示することができます。

ただし、複数行のテキストでは表示が崩れるので、1行のテキストの場合だけ指定するようにしてください。