Darstellung entweder Zeilenweise oder spaltenweise
bearbeitet von ursus contionabundoDu hast:
~~~HTML
<td>100 - 600</td>
~~~
Das müsstest Du wohl ändern:
~~~
<td><span class="tdbreak">100</span><span class="tdbreak">-</span><span class="tdbreak">600</span></td>
~~~
Im CSS dann ein Media-Query:
~~~
span.tdbreak {
display:inline;
}
@media (max-device-width: 70em) {
span.tdbreak {
display:block;
width:100%;
padding:0;
margin:0;
text-align:center;
}
}
~~~
Den Wert der Breite des Ausgabeports ( des Browser-Fensters ) bei dem Du umbrechen willst musst du selbst herausfinden. Und nimm dort nicht etwa Pixel...
Freilich kannst Du auch versuchen:
~~~HTML
<style>
span.nobreak {
white-space: nowrap
}
</style>
<td>100<span class="nobreak"> - </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.
**Hinweise:**
- [**Vielleicht findest Du in veralteten Quellen noch `<nobr>`. Das soll man aber nicht verwenden**](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr)!
- Die Lösung mit dem Media-Query ist also stabiler.
Darstellung entweder Zeilenweise oder spaltenweise
bearbeitet von ursus contionabundoDu hast:
~~~HTML
<td>100 - 600</td>
~~~
Das müsstest Du wohl ändern:
~~~
<td><span class="tdbreak">100</span><span class="tdbreak">-</span><span class="tdbreak">600</span></td>
~~~
Im CSS dann ein Media-Query:
~~~
span.tdbreak {
display:inline;
}
@media (max-device-width: 70em) {
span.tdbreak {
display:block;
}
}
~~~
Den Wert der Breite des Ausgabeports ( des Browser-Fensters ) bei dem Du umbrechen willst musst du selbst herausfinden. Und nimm dort nicht etwa Pixel...
Freilich kannst Du auch versuchen:
~~~HTML
<style>
span.nobreak {
white-space: nowrap
}
</style>
<td>100<span class="nobreak"> - </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.
**Hinweise:**
- [**Vielleicht findest Du in veralteten Quellen noch `<nobr>`. Das soll man aber nicht verwenden**](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr)!
- Die Lösung mit dem Media-Query ist also stabiler.