今回は長い文章などを幅指定し、それ以上の部分は省略して「・・・」を表示する方法
-->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をつかった記述もできたらいいな。
と思う今日この頃でした。