wake-up-neo.com

CSS: Wie kann ich verhindern, dass Text mehr als eine Zeile belegt?

Gibt es einen Zeilenumbruch oder ein anderes Attribut, das das Umbrechen von Text verhindert? Ich habe eine Höhe und overflow:hidden und der Text bricht immer noch.

Muss in allen Browsern vor CSS3 funktionieren.

csstextwrap
270
Franky

div {
  white-space: nowrap;
  overflow: hidden;
}
<div>test that doesn't wrap</div>

Hinweis: Dies funktioniert nur bei Blockelementen. Wenn Sie dies für Tabellenzellen (zum Beispiel) tun müssen, müssen Sie ein div in die Tabellenzelle einfügen, da Tabellenzellen Tabellenzellen nicht blockieren.

Ab CSS3 wird dies auch für Tabellenzellen unterstützt.

542
cletus

Sie können CSS white-space Property verwenden, um dies zu erreichen.

white-space: nowrap
46
Robert C. Barth

Mit Ellipsis wird zuletzt ... hinzugefügt.

   <style type="text/css">
    div {
      white-space: nowrap;
      overflow: hidden;
text-overflow: Ellipsis;
    }
    </style>
20
Vivek

Manchmal funktioniert &nbsp; anstelle von Leerzeichen. Es hat jedoch eindeutig Nachteile.

4
grossvogel

Nur um klar zu sein, das funktioniert gut mit Absätzen und Kopfzeilen usw. Sie müssen lediglich display: block angeben.

Zum Beispiel:

<h5 style="display: block; text-overflow: Ellipsis; white-space: nowrap; overflow: hidden">
  This is a really long title, but it won't exceed the parent width
</h5>

(verzeihen Sie die Inline-Stile)

0
Duncan Jones