tro-suke blog

テキストがオーバーフローしてしまったら…

テキストの表示領域を広くとっていて、PCで見るときは文章が収まっていても、スマホで表示する場合は表示領域が狭くなって収まりきらない場合があったりする。テキストがオーバーフローしてしまったら折り返して表示さすか、消してしまえば解決できそうだが、ちょっと便利な方法があるので記しておこう。

ブログ記事のタイトルを取得して一覧表示させるときなどに便利な記述。

text-overflow: ellipsis;          /* 省略符号を表示する場合 */
text-overflow: clip;              /* 省略符号を表示しない場合 */

ellipsisでテキストがオーバーフローする場合は後ろに「…」を付けてくれる。「…」があることで文章のつづきがあると想定できますよね。省略符号を表示しない場合は、ellipsis を clip に変更。