Darstellung entweder Zeilenweise oder spaltenweise

[Gunnar Bittersmann]

@@ursus contionabundo

<td><span class="tdbreak">100</span><span class="tdbreak">-</span><span class="tdbreak">600</span></td>

Es genügt, entweder die Werte (wie gezeigt) oder den Bis-Strich in einzuspannen.

Letzteres hätte den Charme, dass man bei vertikaler Darstellung auch den Bis-Strich drehen kann:

100
  |
600

span.tdbreak {
   display:inline;
}

Überflüssig. Das span-Element ist sowieso schon inline.

@media (max-device-width: 70em) {

max-width, nicht max-device-width.

   span.tdbreak {
       display:block;
       width:100%;
       padding:0;
       margin:0;

Überflüssig. Ein block-Element macht sich sowieso schon 100% breit und span hat null padding und margin.

       text-align:center;

Bitte nicht. Textinhalte sollten linksbündig sein, Zahlen evtl. rechtsbündig.

<td>100<span class="nobreak">&nbsp;-&nbsp;</span>600</td>

notieren. Das funktioniert aber nur wenn die Zahlen höchstens dreistellig sind, genauer genommen höchstens so breit dargestellt werden wie das Minus-Zeichen und die beiden No-Breaking-Spaces.

Nein! Ein Bis-Strich (‘–’ U+2013 en dash) ist kein Minus-Zeichen (‘−’ U+2212). Und ein Bindestrich (‘-’ U+002D Strichjunge) ist weder das eine noch das andere.

Und der Bis-Strich wird üblicherweise ohne Leerzeichen davor und danach gesetzt. (Wikipedia)

LLAP 🖖