勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

CSSを用いて可変(レスポンシブ)要素内での文字列を丸める方法

   2024/02/20  CSS

可変(レスポンシブ)要素内の文字を丸めたかった。いつもであればPHPのmb_strimwidth関数で文字数を指定し丸めているけど、可変(レスポンシブ)対応ということなので文字数指定というのは使えなかった。調べてみるとCSSで解決できるらしい。以下に対応方法をメモ。

 

ソース

<style>
.sample{
    white-space: nowrap; /*自動改行させない*/
    overflow: hidden; /*内容がボックスに収まらない場合は非表示*/
    text-overflow: ellipsis; /*内容がボックスに収まらない場合三点リーダー(…)で省略*/
}
</style>

text-overflowで丸められるみたい。

 

まとめ

可変の要素内で文字を丸める場合はCSSを使用する。また、PHPの場合とは違ってソース上に全文が表示されるのでSEO的に良さそうなのと、コピペした際も全文が対象になるのでユーザーにとって便利。

 - CSS

  関連記事

IE11でSB Admin2のログインページの表示がおかしい

ダッシュボードや管理画面を作成する際、SB Admin2を使うことが多い。ダッシ ...

スクロールしても追尾する要素をプラグイン等は利用せずCSSのみで作成する方法

コンテンツ内をスクロールしても追尾してくる要素を作成したかった。以前にMeeka ...

CSSフレームワークであるTailwind CSSの特徴とBootstrapとの違いについて

あるサイトをWappalyzerで調査していた際にUIフレームワークがTailw ...

CSSでfloatやmargin&widthは使わずにブロック要素の中央寄せ・右寄せする方法

CSSでブロック要素を中央寄せする場合はwidth指定しつつ「margin:0 ...

画像ホバー時にエフェクトを追加したり文字を重ねられる「Izmir」ライブラリの利用方法

Lightboxを使用しているページで画像をクリックすると拡大表示されることをユ ...