Wie verhindere ich, dass die Schrift in h5 bricht, wenn der Text zu lang ist?

Um zu verhindern, dass der Text in einem <h5>-Element umbrechen kann, verwendet man CSS-Eigenschaften wie white-space: nowrap;, die dazu führen, dass der Text in einer einzigen Zeile bleibt. Das bedeutet aber auch, dass der Text über den Rand des Containers hinauslaufen kann. Um das optisch ansprechend zu lösen, kombiniert man dies mit overflow: hidden;, damit der Text, der nicht mehr in die Zeile passt, nicht sichtbar ist. Zusätzlich kann man text-overflow: ellipsis; verwenden, welches am Ende der Zeile drei Punkte (…) anzeigt, wenn der Text abgeschnitten wurde.

Oft verwendet man auch eine maximale Breite (max-width), um die maximale Breite des <h5>-Elements zu begrenzen, so dass der Ellipsen-Effekt sichtbar wird. Ohne Begrenzung der Breite wäre der Text eventuell gar nicht abgeschnitten.

Zusammengefasst sorgt diese Kombination dafür, dass der Text im <h5>-Element nicht in die nächste Zeile umbricht, sondern stattdessen bei Platzmangel abgeschnitten und mit … visualisiert wird.