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.

— isherwood
quelle

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  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