Wer eine HTML-Tabelle sauber darstellen möchte hat oft das Problem, dass einzelne Spalten zu klein sind, und Texte oder Bezeichnungen in dieser Tabelle umbrechen. Die Umbrüche erfolgen bei Leerzeichen oder Bindestrichen. Wenn man jetzt die Breite einer solchen Spalte angibt ist der Wert entweder zu groß oder zu klein – es passt nie. Was man aber ja meist nur erreichen will ist, dass der Text nicht umbricht. Hierfür gibt es aber auch eine einfach CSS-Anweisung, die Abhilfe schafft. Diese Eigenschaft nennt sich white-space. Sie stellt ein, wie der Text in einem bestimmten Bereich umbrechen soll. Es gibt für white-space drei Möglichkeiten.

• normal => Also ein automatischer Zeilenumbruch bei Leerzeichen und Bindestrichen
• pre => Hier erfolgt der Zeilenumbruch so wie der Text im Editor eingegeben wurde
• nowrap => Der Text wird ohne Zeilenumbruch ausgegeben

Für unseren Bedarf ist die letzte Option nowrap entscheidend. Dies müssen Sie nun dem Text bzw der Tabellenzelle zuweisen. Hierfür können Sie nun Styles definieren und hier white-space:nowrap; festlegen. Oder Sie können das auch einem Element zuweisen über:
<p style=”white-space:nowrap;”>
oder
<td style=”white-space:nowrap;”>

Das heißt nicht, dass Sie Texte nicht umbrechen können. Für einen Umbruch geben Sie einfach im Text einen <br /> ein.

Schlagwörter: CSS, HTML




Diese Artikel könnten Sie interessieren:


Firefox Addon Stylish


Das Firefox Addon Stylish ermöglicht es Ihnen Websites optisch so zu verändern wie Sie das möchten. So können Sie den Seitenhintergrund, Farben oder Schriftarten einfach [...]


HTMLcolor erzeugt Farbcodes für Webdesign und CSS


Ein pfiffiges kleine Tool um sich die Farbcodes für seine Website zusammenzustellen ist HTMLcolor. Über drei Schieberegler verändern Sie die RGB-Anteile Ihrer Farbcodes. Sie können [...]


Bilder in HTML optimal einbauen


Bilder in Websites einbauen ist einfach – dass sie auch gut aussehen ist jedoch nicht trival. Mit einem kleinen Code-Schnipsel können Sie alle Bilder optimal [...]


Fehler im Quellcode finden


Wichtig, ebenso für eine gute Darstellung, wie auch für ein gutes Ranking bei Suchmaschinen ist ein fehlerfreier Quellcode. Google & Co wissen es zu schätzen, [...]


NVU – kostenloser Web-Editor


NVU ist ein kostenloses Werkzeug zum Editieren Ihrer Webseiten. Er basiert auf dem Composer von Mozilla.Das Programm selbst bietet Ihnen drei Möglichkeiten Ihre Website zu [...]

Was meinen Sie dazu?