可変要素内の文字を丸める
可変の要素内の文字を丸めたかった。いつもであれば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的に良さそうなのと、コピペした際も全文が対象になるのでユーザーにとって便利。
関連記事
-
-
CSSのdisplayについて
よく使うdisplayだけれども、noneとblock以外で 初めて使うことがあ ...
-
-
LINE風のふきだしデザイン
LINE風のふきだしデザインでページを作ってほしいと言われた。 CSSはあまり理 ...
-
-
上部に固定されたヘッダーメニューの作成
■やりたい事 ページスクロールしても上部に固定されたヘッダメニューの作る &nb ...
-
-
CSSのopacity
opacityというプロパティを業務中に見かけたのでメモ。 透明度を指定するもの ...
-
-
固定ヘッダーメニュー
やりたかった事は、 ・6つぐらい異なるドメインのページがある ・似たような用途な ...
-
-
CSSでfloatの解除
CSSでfloatがかかっているところを解除したかったけど、 やり方が分からなか ...
-
-
Bootstrapを使用したデザインテンプレート
Bootstrapを使用してもデザインのセンス無いし、 と思っていいものはないか ...
-
-
スマホ用の有料デザインテンプレが9月内は無料でもらえた
envatomarketでスマホ用の有料デザインテンプレートが2014年9月内に ...
-
-
formのsubmitをボタンを無くしたり画像をつけたりCSSで装飾
aタグになっていたところをsubmitボタンに変えてほしいという修正依頼があった ...
-
-
CSSでスタイルの優先
1つのファイルに対して複数スタイルが指定されている、 ということがたまにある。 ...