CSSを用いて可変(レスポンシブ)要素内での文字列を丸める方法
2024/02/20
可変(レスポンシブ)要素内の文字を丸めたかった。いつもであればPHPのmb_strimwidth関数で文字数を指定し丸めているけど、可変(レスポンシブ)対応ということなので文字数指定というのは使えなかった。調べてみるとCSSで解決できるらしい。以下に対応方法をメモ。
ソース
<style> .sample{ white-space: nowrap; /*自動改行させない*/ overflow: hidden; /*内容がボックスに収まらない場合は非表示*/ text-overflow: ellipsis; /*内容がボックスに収まらない場合三点リーダー(…)で省略*/ } </style>
text-overflowで丸められるみたい。
まとめ
可変の要素内で文字を丸める場合はCSSを使用する。また、PHPの場合とは違ってソース上に全文が表示されるのでSEO的に良さそうなのと、コピペした際も全文が対象になるのでユーザーにとって便利。
関連記事
CSSフレームワークであるTailwind CSSの特徴とBootstrapとの違いについて
あるサイトをWappalyzerで調査していた際にUIフレームワークがTailw ...
要素の表示or非表示
今まで要素の表示or非表示をCSSで操作する際、 display:none; / ...
レスポンシブ対応で右カラムのコンテンツを上に表示させる方法
レスポンシブ対応サイトの簡易なコーディングをする経験があった。何も考えずにHTM ...
上部に固定されたヘッダーメニューの作成
■やりたい事 ページスクロールしても上部に固定されたヘッダメニューの作る &nb ...
CSSとJavaScriptでテキストのコピー防止
あるサイトで文言の意味が分からずGoogleで検索する為にコピペしようとするも、 ...