Tips!枠外にはみだした文字を省略記号(…)にする - CSS
ラベルなど、文字が折り返されるとデザインがおかしくなってしまう時、
一定の文字数を超えたら三点(…)で省略してしまいたい時のTipsです。
1)枠外にはみ出す
折返しをしない設定にしていると(white-space: nowrap;)と、文字数次第で下のように文字がはみ出してしまう。
私のこれまでに見て来たところでは、芸術をやるものは多くは無であるやうである。
.new-topic { border: 1px solid #5F984D; border-radius: 6px; background-coler: #AACF53; padding: 5px; width: 300px; white-space: nowrap; }
2)省略記号を使う
上記の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へびさん)