Zeilenumbruch eine sehr lange Zeichenfolge

72

Wie können Sie eine lange Zeichenfolge, Website-Adresse, ein Wort oder einen Satz von Symbolen mit automatischen Zeilenumbrüchen anzeigen, um eine Div-Breite beizubehalten? Ich denke, eine Art Zeilenumbruch. Normalerweise funktioniert das Hinzufügen eines Leerzeichens, aber gibt es eine CSS-Lösung wie Zeilenumbruch?

Zum Beispiel überlappt es (sehr bösartig) divs, Kräfte horizontale Scrollen usw. wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

Was kann ich zu der obigen Zeichenfolge hinzufügen, damit sie innerhalb weniger Zeilen in einem div oder im Browserfenster sauber passt?

Peter Craig
quelle
5
Sogar Stapelüberlauf ist kein
Zeilenumbruch
16
Nun ... 10 Monate später und es sieht so aus, als hätte stackoverflow jetzt eine Korrektur für den ursprünglichen unordentlichen Beitrag - sie haben den Stil "Zeilenumbruch" hinzugefügt: "break-word"; Das macht den Trick in Chrome.
Peter Craig

Antworten:

87

Diese Frage wurde hier schon einmal gestellt:

Um es kurz zu machen:

In Bezug auf CSS-Lösungen müssen Sie: overflow: scroll;das Element zwingen, Bildlaufleisten anzuzeigen und overflow:hidden;nur zusätzlichen Text abzuschneiden. Es gibt text-overflow:ellipsis;und word-wrap: break-word;aber sie sind nur IE ( break-wordist im CSS3-Entwurf enthalten, daher wird es in 5 Jahren die Lösung für diese sein).

Fazit: Wenn es für Sie sehr wichtig ist, dies zu verhindern, indem Sie den Text in die nächste Zeile umbrechen, besteht die einzig sinnvolle Lösung darin, &shy;(weicher Bindestrich), <wbr>(Wortumbruch-Tag) oder &#8203;(Leerzeichen mit der Breite Null) einzufügen. gleicher Effekt wie &shy;Minus-Bindestrich) auf Ihrer String-Serverseite. Wenn Ihnen Javascript nichts ausmacht, gibt es jedoch den Silbentrenner , der ziemlich solide zu sein scheint.

Paolo Bergantino
quelle
Ich habe dies als "Lösung" für die Frage markiert, aber für mich hat es immer noch ein paar Löcher ... Break-Word ist im Wesentlichen das, was ich sehen würde, die anderen Optionen können manuelle Pausen, Leerzeichen, Bindestriche einfügen usw., aber immer noch nicht ordentlich die Linie einwickeln.
Peter Craig
Leider gibt es keine ordentliche oder elegante Lösung für dieses spezielle Problem. Wir kommen alle nur so lange durch, bis Break-Word unterstützt wird.
Paolo Bergantino
Wenn Sie am Ende Zeilenumbrüche auf dem Server ausführen und PHP verwenden, können Sie die Wortumbruchfunktion verwenden.
Roman
Selbst Break-Word löst das Problem nicht wirklich sauber. Es werden kurze Wörter gebrochen, die nicht gebrochen werden sollten (zumindest in Firefox). Im Idealfall werden nur Wörter unterbrochen, die länger als die div-Breite sind. Bei Wörtern, die kürzer als die div-Breite sind, sollte sie stattdessen in die nächste Zeile verschoben werden.
Ryan
10
Hey, ich bin es, fünf Jahre in der Zukunft. Du hattest Recht!
SomeKittens
31

word-wrap: break-word;ist in IE7 + -, FF 3.5- und Webkit-fähigen Browsern (Safari / Chrome usw.) verfügbar. Um IE6 zu handhaben, müssen Sie auch deklarierenword-wrap: break-all;

Wenn FF 2.0 nicht in Ihrer Browser-Matrix enthalten ist, ist die Verwendung dieser eine praktikable Lösung. Leider wird die vorhergehende Zeile, in der das Wort gebrochen ist, nicht getrennt, was ein typografischer Albtraum ist. Ich würde vorschlagen, den von Paolo vorgeschlagenen Silbentrenner zu verwenden, der unauffälliges JavaScript ist. Das Fallback für nicht JavaScript-fähige Benutzer ist dann das gebrochene Wort ohne Bindestriche. Damit kann ich vorerst leben. Dieses Problem tritt höchstwahrscheinlich in einem CMS auf, in dem der Webdesigner keine Kontrolle darüber hat, welche Inhalte eingegeben werden oder wo Zeilenumbrüche und weiche Bindestriche implementiert werden können.

Ich habe mir die W3-Spezifikation angesehen, in der die Silbentrennung in CSS3 behandelt wird. Leider scheint es ein paar Vorschläge zu geben, aber noch nichts Konkretes. Es scheint, dass die Browser-Anbieter noch nichts implementiert haben. Ich habe sowohl Mozilla als auch Webkit auf proprietären Code überprüft, aber es gibt keine Anzeichen dafür.

Kevin Rapley
quelle
Das hat bei mir funktioniert. Der größte Teil der Welt hat jetzt IE7 +, FF3.5 + oder Webkit, daher denke ich, dass Sie Word-Wrap: Break-Word verwenden.
Jeff Davis
28

word-break:break-all arbeitet ein Vergnügen

Sam Jones
quelle
10

Ich habe dies hier erwähnt, aber wahrscheinlich relevanter für diese Frage. Die beste Eigenschaft wird in Kürze Überlauf-Wrap sein. und der beste Wert, wenn es implementiert wird, wäre:

* {
   overflow-wrap:hyphenate. 
}

Zum Zeitpunkt des Schreibens auf dem iPhone oder Firefox und der Überlaufverpackung scheint es noch in keiner Weise unterstützt zu sein: Bindestrich ist noch nicht einmal im Arbeitsentwurf enthalten.

In der Zwischenzeit würde ich verwenden:

p {
    word-wrap: break-word;
    -moz-hyphens:auto; 
    -webkit-hyphens:auto; 
    -o-hyphens:auto; 
    hyphens:auto; 
}
adriatiq
quelle
1
BOOM! Alle meine Probleme hier gelöst. Danke @adriatiq!
Alex Cory
3
Bildschirmsperre;
Überlauf versteckt;
Textüberlauf: Auslassungspunkte;
Breite: 200px; // oder was auch immer für dich am besten ist
Jamiethepiper
quelle
3

Ich benutze den Code, um alle langen Zeichenfolgen, URLs usw. zu verhindern.

 -ms-word-break: break-all;

/* Be VERY careful with this, breaks normal words wh_erever */
     word-break: break-all;

/* Non standard for webkit */
     word-break: break-word;
-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
Roman Losev
quelle
1

Normalerweise tun Cells dies natürlich, aber Sie können dieses Verhalten einem Div aufzwingen mit:

div {
  width: 950px;
  word-wrap: break-word;
  display: table-cell;
}
nikc
quelle
0

Geben Sie immer die Eigenschaft für die Zeilenhöhe an. Wenn Sie diese nicht angeben, kann dies zum Ausfall Ihrer word-break: break-all;Eigenschaft führen.

Shraddha Mohite
quelle
0

Es scheint, dass dies der Trick für das neueste Chrome ist:

[the element],
[the element] * {
  word-wrap: break-word;
  white-space: pre;
}

Ich habe keine Browser außer Chrome überprüft.

SDMulroy
quelle