"Three ways Razor text is in the DOM but invisible on screen"

Text that exists in the DOM and renders fine with shorter strings is completely invisible on screen. No error, no crash — the element is there but the text is gone. This can appear as blank labels, missing values in data panels, or entire rows that vanish when their content gets longer.

There are three distinct failure modes, all verified on the same dense UI panel:

1. Long text line clips to blank

A ~45-character string in a fixed-width (~268 px) card panel renders as an empty box — not wrapped, not truncated, just gone. A ~12-character literal in the same element renders fine. Free-stacked <div>s in a flex-direction: column container collapse to ~0 height and overlap because the glyph line-box exceeds the div's computed height.

2. Narrow segment clips multi-character strings

Six flex-grow: 1 segments in a panel row render a 4-character string ("0.20") as blank, but a 3-character string (".20") displays fine. The 4th glyph overflows the ~44 px segment width and the entire text run drops — not just the overflow character.

3. Computed values resolve inconsistently inline

@Foo() or @tuple.Field3 inside a @<div>…</div> fragment expression can fail to render even when the value is non-null. The same value resolved to a plain local first (string s = Foo(); … @s) renders reliably.

Mode 1 — long text: Split content into short lines. For label/value data, use a row-with-spans pattern:

<div style="display: flex; flex-direction: row; justify-content: space-between;">
    <span>Label</span>
    <span>@Value</span>
</div>

This stacks reliably instead of collapsing to zero height.

Mode 2 — narrow segments: Widen the container, reduce the segment count, or shorten the string (e.g. ToString(".00") instead of ToString("0.00") to drop one character).

Mode 3 — computed values: Resolve to a plain local variable before interpolating:

@code {
    string display = MyComponent?.SomeValue.ToString("0.00") ?? "—";
}

<div>@display</div>   @* reliable *@
@* NOT: <div>@MyComponent?.SomeValue.ToString("0.00")</div> *@

Each mode has a different root mechanism: (1) is a flex-column height-collapse bug where the line-box exceeds the container, (2) is a text-run-level clip where any overflow drops the entire run rather than just the overflowing glyph, and (3) appears to be a Razor fragment expression evaluation issue where complex inline expressions don't resolve the same way as pre-evaluated locals. Addressing each at the structural level avoids fighting the engine's text layout.