Tips!枠外にはみだした文字を省略記号(…)にする - CSS

ラベルなど、文字が折り返されるとデザインがおかしくなってしまう時、
一定の文字数を超えたら三点(…)で省略してしまいたい時のTipsです。

１）枠外にはみ出す

折返しをしない設定にしていると(white-space: nowrap;)と、文字数次第で下のように文字がはみ出してしまう。

私のこれまでに見て来たところでは、芸術をやるものは多くは無であるやうである。

.new-topic {
	border: 1px solid #5F984D;
	border-radius: 6px;
	background-coler: #AACF53;
	padding: 5px;
	width: 300px;
	white-space: nowrap;
}

２）省略記号を使う

上記のCSSに
・overflow: hidden;　（はみ出た部分を非表示にする）
・text-overflow: ellipsis;　（はみ出た部分があることを示すために省略記号…を用いる）
を追加すると、下のようにはみ出さなくなる。

私のこれまでに見て来たところでは、芸術をやるものは多くは無であるやうである。

.new-topic {
	border: 1px solid #5F984D;
	border-radius: 6px;
	background-coler: #AACF53;
	padding: 5px;
	width: 300px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

(byへびさん）