【HTML CSS】CSSとたたかう 空文字編

帳票系を触っていると、空欄の対応に苦戦することがあるので、メモ。
マスタッシュ構文はPHP想定だが、他の言語も雰囲気は同じ。

デフォルト

{{ $value = "変動する値" }}

<div style="padding: 8px;">
    <div>ヘッダ要素</div>
    <div>{{ $value }}</div>
    <div>フッダ要素</div>
</div>

このようなレイアウトの場合、変動する値が空欄だと、高さが0になり潰れてしまう。
潰れる＝レイアウトが崩れる＝

{{ $value = "" }}

<div style="padding: 8px;">
    <div>ヘッダ要素</div>
    <div>{{ $value }}</div>
    <div>フッダ要素</div>
</div>

対策(1) CSS の height を使用する

BOXの高さを固定してしまう作戦。
line-height では、文字が無いときに高さが0となってしまうので注意。

{{ $value = "" }}

<div style="padding: 8px;">
    <div>ヘッダ要素</div>
    <div style="height: 1rem;">
        {{ $value }}
    </div>
    <div>フッダ要素</div>
</div>

rem など相対単位を使用すると、良い感じに一文字分にできる。
複数行の場合は min-height でも良いかもしれない。

対策(2) if で全角スペースを挿入する

HTML 的にはレビュー指摘が来るような内容だが、一番簡単に実現できる。
文字が無くなるから高さが0になるので、見えない文字を追加する。
  など、エスケープ文字を使うのも良い。

PHP なら mb_strlen()、 JS なら String: length を使うと良い。

{{ $value = ""; }}

<div style="padding: 8px;">
    <div>ヘッダ要素</div>
    <div>{{ mb_str($value) ? $value : "　" }}</div>
    <div>フッダ要素</div>
</div>

文字サイズの変動にも耐えうるので、意外と賢いやり方な気がする。