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.

#CSS #HTML

Susann, schreibt seit 2006 für das Tipps-Archiv. Bevorzugte Themen: Computer/Hardware, Wordpress, Windows und Internet.