CSSだけで文字列を省略して「・・・」を表示する方法

今回は長い文章などを幅指定し、それ以上の部分は省略して「・・・」を表示する方法

Javascriptやphpを使ったものはたくさんあると思いますが

CSSだけで文字列を省略して「・・・」を付けて表示する事を記述したまとめ

前からできる感じだったが、めんどくさくてつい最近まで「・・・」を直接記述してました。

仕事の関係上CMS絡みでやっとこさ重い腰を上げる事に。

Firefox、Safari、iE6~10まで対応させてみました。

簡単に説明すると

text-overflow: ellipsis;

上記を使う。

「ellipsis」の説明をすると、
指定した幅からはみ出した部分の最後に「・・・」を付け足す。
というのがこの値です。

ちなみに「clip」は、何もつけません。

text-overflow: ellipsis;

上記だけだと上手くいかないので

方法としては、
横幅(width)、white-spce: nowrap、overflow:hidden;
を指定する事が肝心。

正確にCSSの記述をすると

.hoge {
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}

「text-overflow」プロパティにはInternet Explorerのバージョン6以上とSafari、Firefox、Operaが対応している。

ただし、Safariでは-webkit-text-overflow、Operaでは-o-text-overflowと記述する。

以上で表示されると思います笑

時間があれば、Javascript、PHPをつかった記述もできたらいいな。

と思う今日この頃でした。

コメントを残す

メールアドレスが公開されることはありません。