CSS: 文字が入り切らない場合に省略表示する (「…」をつける)

ある枠内に文字が入り切らなかったら省略表示するようにしたい場合、CSSでは text-overflow: ellipsis を使用します。

.box {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

HTMLでは通常は文章が折り返しされるため、text-overflow: ellipsis だけだと省略表示の設定がうまく効かない点に注意してください。

折り返しをしないように white-space: nowrap を使用し、文字がはみ出ないように overflow: hidden もあわせて使用します。

カーソルを合わせたときに全文表示する

カーソルを合わせたときに省略表示になっている文章を全文表示するには、 :hover を使用して折り返し禁止のスタイルを解除します。

.box:hover {
    white-space: normal;
}