スタイルシートで文字列を省略し、・・・を付ける方法

2009/07/17
HTML/CSS

Webで使えるテクニック！Webで困ったときのメモ帳より、CSSだけで文字列を省略して「・・・」を付けて表示する方法というのがありました。
http://ameblo.jp/linking/entry-10268808742.html

そして、その元記事はこちら
FirefoxとSafariのCSS対応--ボックスに収まらないコンテンツの表示方法
http://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20378240-2,00.htm

要は、
text-overflow: ellipsis;
を使うのだが、文字数ではなく、幅で指定できるので、これは使えそうなテクニックだ。

と思ったのだが、

text-overflowプロパティに対応しているのは、IE6以上と、Safari、Opera とのこと。

・・・ Firefox や Chrome は？

上記ページにあったサンプルをつかって、実際の表示を確認したところ、
予想通り、Chrome は ・・・ が表示されたが、Firefox では、表示されませんでした。

・・・残念！

一応、実例としては、
Safariでは-webkit-text-overflow、Operaでは-o-text-overflowと記述するので、
実際にＣＳＳを書くと、以下のようになるそうです(border なんかはいらないだろうけど)

div	{
	overflow: hidden;
	text-overflow: ellipsis;	-webkit-text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	width: 300px;
	border: solid 1px orange;
}



同じカテゴリー（HTML/CSS）の記事
iPhone/iPad のSafariブラウザで、電話番号がリンクになる件の対応
iPhone/iPad のSafariブラウザで、電話番号がリンクになる件の対応(2013-09-30 20:18)

YUI Grids CSSを利用する＞cssフレームワーク
YUI Grids CSSを利用する＞cssフレームワーク(2009-03-18 17:15)

Yahoo!UI LibraryのYUI ResetCSS
Yahoo!UI LibraryのYUI ResetCSS(2009-02-12 15:26)

Javascript でOnclick属性を使わない方がよい
Javascript でOnclick属性を使わない方がよい(2009-02-07 17:17)

プルダウンを選択した後にフォーカスを外す
プルダウンを選択した後にフォーカスを外す(2008-09-24 22:43)

JavaScriptを使って絵が描けるCanvas
JavaScriptを使って絵が描けるCanvas(2008-09-13 07:47)

Posted by ＳＥ風味

上の画像に書かれている文字を入力して下さい
 
＜ご注意＞
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。

写真一覧をみる

削除
スタイルシートで文字列を省略し、・・・を付ける方法
    アイコン（絵文字）の挿入 スタンプ（絵文字）の挿入
    コメント(0)