浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【css】文字制限のある要素にheightに設定してうまい具合にテキストを表示する

【実現したいこと】

テキストの長さに合わせてそのテキストが入った要素の大きさがずれるので修正したい。

案①

13文字以下の場合のみ疑似的にテキストを入れて1行空いたように

見せる。→半角文字が一部テキストとして見られない。

つまり半角テキストと全角テキストが混じっているテキストは13文字以下でも行が追加されない。ボツ

案②

今度はテキストではなくdiv(空白)をそのまま入れる。13文字制限は同じ。

→横幅の広いデバイスの場合は文字数の少ないテキストと文字数の多いテキストも

両方収まる。13文字以下の場合はdivが設けられるので要素の高さが

13文字以下のテキスト>それ以外のテキストになってしまうのでこれもボツ。

 

案③

悩んだあげくheightで行の高さを決めて、その行が設けられているところまで

文字を出し、行の終わりになったら…でテキストを略すのが

一番ベスト。(どのデバイスでも形が崩れない)

//テキストが入る要素。height: 30pxに設定


.grid-item div.notes {
padding: 10px;
height: 30px;
}


【まとめ】

テキストの長さによって要素の大きさが変わる場合は、あらかじめwidth・heightを設けて

その幅・高さまでテキストが存在する場合になにかしらの制限をかけるべき。

  • この記事いいね! (0)