【実現したいこと】
テキストの長さに合わせてそのテキストが入った要素の大きさがずれるので修正したい。
案①
13文字以下の場合のみ疑似的にテキストを入れて1行空いたように
見せる。→半角文字が一部テキストとして見られない。
つまり半角テキストと全角テキストが混じっているテキストは13文字以下でも行が追加されない。ボツ
案②
今度はテキストではなくdiv(空白)をそのまま入れる。13文字制限は同じ。
→横幅の広いデバイスの場合は文字数の少ないテキストと文字数の多いテキストも
両方収まる。13文字以下の場合はdivが設けられるので要素の高さが
13文字以下のテキスト>それ以外のテキストになってしまうのでこれもボツ。
案③
悩んだあげくheightで行の高さを決めて、その行が設けられているところまで
文字を出し、行の終わりになったら…でテキストを略すのが
一番ベスト。(どのデバイスでも形が崩れない)
//テキストが入る要素。height: 30pxに設定
.grid-item div.notes {
padding: 10px;
height: 30px;
}
【まとめ】
テキストの長さによって要素の大きさが変わる場合は、あらかじめwidth・heightを設けて
その幅・高さまでテキストが存在する場合になにかしらの制限をかけるべき。