勉強したことのメモ

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

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

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

2018/08/31 2024/02/20 CSS

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

目次

1 ソース
2 まとめ

ソース

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

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

まとめ

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

関連記事

: Material Design LiteでiPhoneのみリンク(ボタン)をクリックしても動作しない場合の対応方法

最近サイト内のツールページ等をMaterial Design Liteで作ってい ...

: CSSでカラーコード等を変数(カスタムプロパティ)として使用する方法

他社が作成されたCSSのソースコードを拝見していると、背景等の色を指定する部分に ...

: 特定のID / Classを持つタグの親要素に対してCSSを割り当てる方法

特定のID / Classを持つタグの親要素に対してCSSを割り当てたい。また、 ...

: レスポンシブ対応で右カラムのコンテンツを上に表示させる方法

レスポンシブ対応サイトの簡易なコーディングをする経験があった。何も考えずにHTM ...

: CSSで親子関連のセレクターをネスト(入れ子)で指定する方法

CSSで親子関連のセレクターを指定する場合「.parent .child{}」の ...