表示領域からオーバーした文字列を「...」で表示する方法

文字列を表示する時に領域からはみ出した部分を省略記号「...」で表したい場合がよくあるので、そういった時に設定するCSSをメモしておきます。

「white-space: nowrap」だけでは、領域をオーバーして文字列が表示されてしまう。

１２３４５６７８９０１２３４５６７８９０

.text_area{
    border:1px solid #aae;
    width:110px;
    white-space: nowrap;
}

次に「overflow: hidden」を設定することで、はみ出た部分は表示されなくなるが、文字が途中で切れた状態で表示されてしまい、ちょうど文字と文字の間であればいいが、そうでない場合は見栄えが大変よろしくない。

１２３４５６７８９０１２３４５６７８９０

.text_area{
    border:1px solid #aae;
    width:110px;
    white-space: nowrap;
    overflow: hidden;
}

「text-overflow」に「ellipsis（省略記号）」を設定することで領域からオーバーした文字列が「...」で表示されるようになる。

１２３４５６７８９０１２３４５６７８９０

.text_area{
    border:1px solid #aae;
    width:110px;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

上記の方法では「white-space: nowrap」を設定していることもあり、複数行での表示ができない。複数行で省略記号を用いる場合は、以下の方法で行う。

１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０

.text_area{
    border:1px solid #aae;
    width:110px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

「-webkit-line-clamp」の設定値を変更することで、対応する行数が変化する。ただし、上記の方法は「Chrome」と「Safari」しか対応していないので、使う場合は注意が必要。