Zeilenumbruch eine sehr lange Zeichenfolge

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?

Diese Frage wurde hier schon einmal gestellt:

• Wer hat das Problem der langen Wortbrüche gelöst? (Hinweis: kein Stackoverflow)
• Zeilenumbruch in CSS / JS
• CSS: Wie kann ich erzwingen, dass eine lange Zeichenfolge (ohne Leerzeichen) in XUL und / oder HTML eingeschlossen wird?
• CSS-Überlauf mit langer URL

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, ­(weicher Bindestrich), <wbr>(Wortumbruch-Tag) oder ​(Leerzeichen mit der Breite Null) einzufügen. gleicher Effekt wie ­Minus-Bindestrich) auf Ihrer String-Serverseite. Wenn Ihnen Javascript nichts ausmacht, gibt es jedoch den Silbentrenner , der ziemlich solide zu sein scheint.

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.

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

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

Bildschirmsperre;
Überlauf versteckt;
Textüberlauf: Auslassungspunkte;
Breite: 200px; // oder was auch immer für dich am besten ist

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;

Hoffentlich erhalten wir eines Tages Zugriff auf die word-wrapEigenschaft in CSS3: Force Wrapping: die Eigenschaft 'Zeilenumbruch' .

Irgendwann mal...

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

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.

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.