CSSを用いて可変(レスポンシブ)要素内での文字列を丸める方法
2024/02/20
可変(レスポンシブ)要素内の文字を丸めたかった。いつもであればPHPのmb_strimwidth関数で文字数を指定し丸めているけど、可変(レスポンシブ)対応ということなので文字数指定というのは使えなかった。調べてみるとCSSで解決できるらしい。以下に対応方法をメモ。
ソース
<style>
.sample{
white-space: nowrap; /*自動改行させない*/
overflow: hidden; /*内容がボックスに収まらない場合は非表示*/
text-overflow: ellipsis; /*内容がボックスに収まらない場合三点リーダー（…）で省略*/
}
</style>
text-overflowで丸められるみたい。
まとめ
可変の要素内で文字を丸める場合はCSSを使用する。また、PHPの場合とは違ってソース上に全文が表示されるのでSEO的に良さそうなのと、コピペした際も全文が対象になるのでユーザーにとって便利。
関連記事
-
-
jQueryとCSSで指定したテキストに対してラインマーカーを引く方法
サイト内で強調したいテキストに対して蛍光ペンでマーカーを引くようなアニメーション ...
-
-
Bootstrapよりも簡単でClassを付与する必要のないCSSフレームワーク「Simple.css」の利用方法
何らかのテストページを提出する際、見た目を整えるためBootstrapを使用した ...
-
-
CSSでカラーコード等を変数(カスタムプロパティ)として使用する方法
他社が作成されたCSSのソースコードを拝見していると、背景等の色を指定する部分に ...
-
-
CSSで1つの要素に複数classを設定して画像を入れ替える方法
メニューリンクで通常時の画像、マウスオーバー時の画像、アクティブ時の画像をそれぞ ...
-
-
スクロールしても追尾する要素をプラグイン等は利用せずCSSのみで作成する方法
コンテンツ内をスクロールしても追尾してくる要素を作成したかった。以前にMeeka ...