Gibt es eine Möglichkeit, lange Wörter in ein Div zu wickeln?

172

Ich weiß, dass Internet Explorer einen Zeilenumbruchstil hat, aber ich würde gerne wissen, ob es eine browserübergreifende Methode gibt, um Text in einem div zu schreiben.

Am besten CSS, aber JavaScript-Snippets würden auch gut funktionieren.

edit: Ja, ich beziehe mich auf lange Saiten, Prost Leute!

css html word-wrap Rutherford
quelle
7
Der Zeilenumbruch erfolgt standardmäßig. Meinen Sie das Umwickeln, wenn es keine separaten Wörter gibt?
Quentin

Antworten:

313

Beim Lesen des Originalkommentars sucht Rutherford nach einer browserübergreifenden Methode zum Umbrechen von ungebrochenem Text (abgeleitet durch die Verwendung von Zeilenumbruch für IE, mit dem ungebrochene Zeichenfolgen gebrochen werden sollen).

/* Source: http://snipplr.com/view/10979/css-cross-browser-word-wrap */
.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

Ich habe diese Klasse jetzt für ein bisschen benutzt und funktioniert wie ein Zauber. (Hinweis: Ich habe nur in FireFox und IE getestet)

Aaron Bennett
quelle
Alter Beitrag, aber es scheint keine Leerzeichen zu rendern, wenn sich der IE im Mackenmodus befindet.
Jeremy
2
Ich verwende Firefox 24.6.0 und genau das word-wrap: break-wordhat funktioniert.
user545424
3
Word-wrap: break-wordObwohl von Microsoft erstellt, ist es jetzt Teil des CSS 3-Standards und macht den Trick :-)
Pascal_dher
37

Die meisten der vorherigen Antworten haben in Firefox 38.0.5 bei mir nicht funktioniert. Das hat ...

<div style='padding: 3px; width: 130px; word-break: break-all; word-wrap: break-word;'>
    // Content goes here
</div>

Dokumentation:

Paul Zahra
quelle
2
Vielen Dank! Dies ist die einzige Antwort, die funktioniert hat (
Wortumbruch
12

Die Lösung von Aaron Bennet funktioniert perfekt für mich, aber ich musste diese Zeile aus seinem Code entfernen -> white-space: -pre-wrap;weil es einen Fehler gab, so ist der endgültige Arbeitscode der folgende:

.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

vielen Dank

Hugo
quelle
1
Aaron Bennett hat diese Antwort 2 Jahre vor Ihnen erwähnt. Was Sie hier getan haben, bringt keinen Mehrwert.
AaA
6
Hallo, wie Sie sehen können, wenn Sie beide Antworten noch einmal lesen, sage ich nur, dass Aarons Lösung in Ordnung ist, aber ich habe in einer der Zeilen, die er geschrieben hat, einen Fehler erhalten, also habe ich ihn einfach in die Lösung geändert, für die er funktioniert hat mich. Vielleicht sollte ich einen Kommentar in seiner Antwort haben, ich weiß es, sorry & danke
Hugo
Ich musste diesen "Leerraum: -pre-wrap" hinzufügen und es funktionierte :)
Ravi Khambhati
0

Wie David erwähnt, DIVs tun Wrap Worte standardmäßig.

Wenn Sie sich auf wirklich lange Textzeichenfolgen ohne Leerzeichen beziehen, verarbeite ich die Zeichenfolge serverseitig und füge leere Bereiche ein:

thisIsAreallyLongStringThatIWantTo<span></span>BreakToFitInsideAGivenSpace

Es ist nicht genau, da es Probleme mit der Schriftgröße und dergleichen gibt. Die Option span funktioniert, wenn der Container eine variable Größe hat. Wenn es sich um einen Container mit fester Breite handelt, können Sie einfach Zeilenumbrüche einfügen.

DA.
quelle
@ TomHert das ist wirklich seltsam. Aber gut, IE. Es funktioniert nie. Das heißt, dies wurde vor 5 Jahren veröffentlicht. CSS3 bietet jetzt einige bessere Optionen für den Zeilenumbruch, die der IE möglicherweise für developer.mozilla.org/en-US/docs/Web/CSS/word-wrap
DA
Ja, ich weiß, ich war nur schockiert von der Einfachheit dieser Lösung, dass ich sie ausprobieren musste :)
Tom Hert
0

Sie können versuchen, eine Breite für das Div anzugeben, sei es in Pixel, Prozent oder Ems. An diesem Punkt bleibt das Div in dieser Breite und der Text wird automatisch innerhalb des Div umbrochen.

Slevin
quelle
Versuchen Sie, 10px Breite einzustellen ... und verwenden Sie dann ein Wort länger als 10px
Paul Zahra