勉強したことのメモ

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

  関連記事

CSSで一つの要素に対して複数の背景色を指定する方法

1つのdiv要素に対して複数の背景色をつけたかった。background-col ...

管理画面やダッシュボードとして便利そうなBootstrap系のテンプレート

新規サイトの立ち上げでダッシュボード、管理画面を作る必要があった。小規模なサイト ...

スマホサイトでviewportを指定しても横スクロールバーが表示される

スマホ用のサイトでviewportが指定されており、widthも100%になって ...

LINE風のふきだしデザイン

LINE風のふきだしデザインでページを作ってほしいと言われた。 CSSはあまり理 ...

CSSのopacity

opacityというプロパティを業務中に見かけたのでメモ。 透明度を指定するもの ...