【HTML】CSSでテキストを省略し「...」と表示する方法

公開: 2013-09-24 04:51
更新: 2016-04-29 06:03
どうもこんにちは
いつにも増しておなかと背中がくっつきそうなあっきぃ(@appstars_aki)です。
え?おすすめですか?そうですね。袋ラーメンはマルちゃん正麺がおすすめです。ぐぅ。

さてさてテキストを省略して「...」とか付けちゃいたいそこのあなた。
いい方法がありますよ♪

「text-overflow: ellipsis;」

ってやつです。いいやつです。
使ってみましょう。

HTML
<div class="summary">
        先日助けていただいた亀です。仕掛けた罠にかかっていた鶴をお礼に差し上げまする。
</div>
CSS(※関係なさげなCSSは省略しています。borderとか)
.summary {
        width: 150px;
}
先日助けていただいた亀です。仕掛けた罠にかかっていた鶴をお礼に差し上げまする。
こちらに次のように「text-overflow: ellipsis;」を追加。あと、改行させない「white-space: nowrap;」と、はみ出た領域を非表示にする「overflow: hidden;」をつける。
.summary {
        width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
}
するとこんな感じ
先日助けていただいた亀です。仕掛けた罠にかかっていた鶴をお礼に差し上げまする。
うむ。良い感じですな。
古いブラウザなんかに対応するには。つぎのように書くと良いそうです♪
.summary {
        width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
}
ではでは♪

この記事をシェア
この記事にコメントする
書き込む
あっきぃ(@appstars_aki)
Web、iOSなフリーランサーです。好きなものはお寿司です。でもお寿司は高いので普段は雑草とか拾ったドングリを食べています。お仕事や意味もなく毎月お小遣いをくれる人を探してます。

お仕事の依頼や自分で作ったアプリのレビューを希望しちゃう方はaki@appstars.jpまでご連絡ください。