Wie kann verhindert werden, dass Text mehr als eine Zeile einnimmt?

331

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

Muss in allen Browsern vor CSS3 funktionieren.

html css text word-wrap isherwood
quelle

Antworten:

630 

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

Hinweis: Dies funktioniert nur bei Blockelementen. Wenn Sie dies beispielsweise für Tabellenzellen tun müssen, müssen Sie ein Div in die Tabellenzelle einfügen, da Tabellenzellen die Anzeige "Tabellenzelle nicht blockieren" haben.

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

Cletus
quelle
12
Leerraum! Das ist es, wonach ich gesucht habe ... 1.000 danke ... das ist unmöglich zu googeln!
2
Es gibt auch ein proprietäres dh Attribut namens Word-Wrap (IIRC) ... dummer IE.
Garrow
21
Beachten Sie auch "Textüberlauf: Auslassungspunkte;" Es fügt das ... am Ende Ihres Textes hinzu, wenn es außerhalb der Grenzen der Breite Ihres Containers liegt
Drew Landgrave
1
Ich denke, der Kommentar "Dies funktioniert nur bei Blockelementen" ist richtig. Wenn Sie dies in einem Anker, Absatz, einer Überschrift usw. versuchen, funktioniert dies nicht. Sie müssen etwas tun wiep.oneline { white-space:nowrap; overflow:hidden; display:block;}
Alex Angelico
Achten Sie darauf, den Überlauf nicht zu verbergen. es bedeutet Geschäft.
David A. Gray
57

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

white-space: nowrap
Robert C. Barth
quelle
36

Wenn Sie Auslassungspunkte verwenden, wird zuletzt das ... hinzugefügt.

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

Manchmal &nbsp;funktioniert die Verwendung anstelle von Leerzeichen. Natürlich hat es auch Nachteile.

Grossvogel
quelle
Leider kann ich es unter diesen Umständen nicht tun
2

Nur um kristallklar zu sein, funktioniert dies gut mit Absätzen und Überschriften usw. Sie müssen nur angeben display: block .

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)

Duncan Jones
quelle