可変要素内の文字を丸める
可変の要素内の文字を丸めたかった。いつもであればPHPのmb_strimwidth関数で丸めているけど、可変なので文字数指定というのは使えない。調べてみるとCSSで解決できたのでメモ。
サンプル
http://sample.taitan916.info/overflow/
ソース
|
1 2 3 4 5 6 7 |
<style> .sample{ white-space: nowrap; /*自動改行させない*/ overflow: hidden; /*内容がボックスに収まらない場合は非表示*/ text-overflow: ellipsis; /*内容がボックスに収まらない場合三点リーダー（…）で省略*/ } </style> |
まとめ
可変の要素内で文字を丸める場合はCSSを使用する。また、PHPの場合とは違ってソース上に全文が表示されるのでSEO的に良さそうなのと、コピペした際も全文が対象になるのでユーザーにとって便利。
関連記事
-
-
jQueryのCSS変更
jQueryでCSSを触る際、 $("#aaa").css('height',' ...
-
-
ダウンロード無しで外部ファイル呼び出し
■jQuery http://scriptsrc.net/ ■bootstrap ...
-
-
firebugでCSSパスをコピー
要素を調査⇒右クリック⇒CSSパスをコピーできる。 jQueryでのセレクタ指定 ...
-
-
ガラケー(特にdocomo)でのCSS
PCサイトだとIEでつまずくことが多いけど、 ガラケーはdocomoが難儀やよ、 ...
-
-
LINE風のふきだしデザイン
LINE風のふきだしデザインでページを作ってほしいと言われた。 CSSはあまり理 ...
-
-
CSSでセンターリング
<center></center>でセンターリングが出来 ...
-
-
CSSのopacity
opacityというプロパティを業務中に見かけたのでメモ。 透明度を指定するもの ...
-
-
cssのcontent
テキストが書かれているけど、firebugで要素を見ても 書かれていない。かとい ...
-
-
スクロールしても追尾する要素をCSSで作成
コンテンツ内をスクロールしても追尾してくる要素を作成したかった。以前にMeeka ...
-
-
formのsubmitをボタンを無くしたり画像をつけたりCSSで装飾
aタグになっていたところをsubmitボタンに変えてほしいという修正依頼があった ...