Ich habe verwendet word-wrap: break-word Text umbrechen divs und spanS. Allerdings scheint es in Tabellenzellen nicht zu funktionieren. Ich habe einen gedeckten Tisch width:100%, mit einer Zeile und zwei Spalten. Text in Spalten, obwohl wie oben gestylt word-wrap, wickelt nicht. Es bewirkt, dass der Text über die Grenzen der Zelle hinausgeht. Dies geschieht bei Firefox, Google Chrome und Internet Explorer.
Das lange Wort oben ist größer als die Grenzen meiner Seite, aber es bricht nicht mit dem obigen HTML. Ich habe die folgenden Vorschläge zum Hinzufügen ausprobiert text-wrap:suppress und text-wrap:normalaber beides hat nicht geholfen.
Bindestrich hinzufügen.
Dies ist eine Präsentation.
– KV Prajapati
11. August 2009 um 6:27 Uhr
Leider stammt der Text darin von nutzergenerierten Inhalten. Natürlich könnte ich es vorverarbeiten und den Bindestrich hinzufügen, aber ich hatte gehofft, dass es einen besseren Weg geben würde.
– psychotik
11. August 2009 um 6:36 Uhr
Ich entschuldige mich für die Verwendung des Wortes “harter Bindestrich”. In HTML wird der einfache Bindestrich durch das Zeichen „-“ (- oder -) dargestellt. Der weiche Bindestrich wird durch die Zeichenentitätsreferenz ( oder )
– KV Prajapati
11. August 2009 um 6:58 Uhr
Verwenden Sie wirklich break-work? Vielleicht könnte das damit zu tun haben.
@ewomac ja, manchmal muss ich die VS2010-Fehler zu HTML/CSS einfach ignorieren, wenn ich weiß, dass es im Browser funktioniert.
– Marc Stober
11. August 2011 um 16:19 Uhr
@Marc!! Alter, vielen Dank dafür. Ich wurde beauftragt, eine mobile Version einer Client-Site zu erstellen, die Tabellen verwendet, und ich hatte Probleme, dies zum Laufen zu bringen! table-layout:fixed hat es geschafft!
– debuggen
14. September 2011 um 21:47 Uhr
Dadurch werden die anderen Spalten viel zu breit.
– Clemens
13. Dezember 2011 um 10:55 Uhr
Unbedingt lesen developer.mozilla.org/en-US/docs/Web/CSS/table-layout Tabellen- und Spaltenbreiten werden durch die Breite der Tabellen- und Spaltenelemente oder durch die Breite der ersten Zellenzeile festgelegt. Zellen in nachfolgenden Zeilen wirken sich nicht auf die Spaltenbreite aus. Klingt so, als wäre dies auch gut für die Leistung.
– Sam Barnum
9. August 2013 um 1:41 Uhr
@Clément siehe Indreks Antwort unten über <colgroup>es hat das für mich behoben.
Kann bestätigen, dass der Ansatz von Pratik auch auf Safari auf iOS (iPhone) funktioniert.
– Okkulus
24. März 2011 um 14:43 Uhr
Um das Problem mit einigen kurzen und einigen langen Wörtern zu umgehen, könnten Sie möglicherweise den Text vorverarbeiten und nur lange Wörter (z. B. > 40 Zeichen) in die umbrechen <span>.
– Nornagon
2. Juni 2011 um 8:30 Uhr
Dies wird nicht von Firefox, Opera unterstützt
– Meotimdihia
8. Juli 2011 um 22:24 Uhr
Dies brach nicht vorzugsweise bei Nicht-Wort-Zeichen (wenn ich beispielsweise eine Reihe kürzerer Wörter hätte, die durch Leerzeichen getrennt wären, würde es die Wörter immer bis zur Zeile laufen lassen und dann das letzte Wort in zwei Hälften brechen). Word-wrap wird Worte nur brechen, wenn es nötig ist
– Haschbraun
7. März 2016 um 0:31 Uhr
Dieser Ansatz ist besser, weil nicht erforderlich table-layout: fixed;.
– Finesse
7. April 2017 um 1:40 Uhr
Rick Grundy
Ein langer Schuss, aber überprüfen Sie mit Feuerwanze (oder ähnlich), dass Sie die folgende Regel nicht versehentlich erben:
Dies ist, was geerbt wurde und den Wortumbruch für mich gebrochen hat
– Shane Lee
7. Februar 2013 um 10:55 Uhr
@ RickGrundy In was ändern Sie es, wenn Sie dieses Problem haben?
– kokodude
30. Juni 2014 um 16:02 Uhr
@cokedude Ich bin viel zu spät hier, aber es ist white-space:normal;
– Bier mich
20. Januar 2016 um 19:30 Uhr
Dies hat mir das Problem verursacht. Danke für deinen Kommentar, er war hilfreich.
– JeffMan
30. Juli 2020 um 1:49 Uhr
Vielen Dank, Mann, Sie haben Stunden meiner Zeit gespart
– Rittesh PV
5. Mai 2021 um 14:39 Uhr
psychotik
Es stellt sich heraus, dass es keinen guten Weg gibt, dies zu tun. Am nächsten kam ich dem Hinzufügen von “overflow:hidden;” zum div um den Tisch und den Text zu verlieren. Die wirkliche Lösung scheint jedoch darin zu bestehen, den Tisch fallen zu lassen. Mit divs und relativer Positionierung konnte ich den gleichen Effekt erzielen, abzüglich des Vermächtnisses von <table>
AKTUALISIERUNG 2015: Dies ist für diejenigen wie mich, die diese Antwort wollen. Nach 6 Jahren funktioniert das, danke an alle Mitwirkenden.
* { /* this works for all but td */
word-wrap:break-word;
}
table { /* this somehow makes it work for td */
table-layout:fixed;
width:100%;
}
Loungedork
Wie bereits erwähnt, den Text einfügen div funktioniert fast. Sie müssen nur die angeben width des divwas für statische Layouts ein Glücksfall ist.
.content{
word-wrap:break-word; /*old browsers*/
overflow-wrap:break-word;
}
table{
width:100%; /*must be set (to any value)*/
}
.overflow-wrap-hack{
max-width:1px;
}
Leistungen:
Verwendet overflow-wrap:break-word anstatt word-break:break-all. Was besser ist, weil es zuerst versucht, Leerzeichen zu unterbrechen, und das Wort nur dann abschneidet, wenn das Wort größer als sein Container ist.
Nein table-layout:fixed erforderlich. Verwenden Sie Ihre normale automatische Größenanpassung.
Nicht erforderlich, um fest zu definieren width oder fixiert max-width in Pixel. Definieren % des Elternteils ggf.
Getestet in FF57, Chrome62, IE11, Safari11
Du kannst hinzufügen min-width: 100% zusammen mit width die zu gewährleisten div nimmt die ganze Zelle ein.
– Benutzer1091949
16. Februar 2016 um 8:24 Uhr
Ich möchte Zeilenumbruch mit Komma (,) machen. Wie Long,Long,Long,Long,Long. Ich möchte dies nach einem Komma (,) umschließen.
ist, dass es nicht so gut funktioniert, wenn Text hat einige Leerzeichen, z
<td style="word-break:break-all;">long text with andthenlongerwithoutspaces</td>
Wenn Wort andthenlongerwithoutspaces passt aber in eine Tabellenzelle in einer Zeile long text with andthenlongerwithoutspaces nicht, wird das lange Wort in zwei Teile gebrochen, anstatt umgebrochen zu werden.
Alternativlösung: U+200B einfügen (ZWSP), U+00AD (weicher Bindestrich) oder U+200C (ZWNJ) in jedem langen Wort nach jedem, sagen wir, 20. Zeichen (siehe jedoch Warnung unten):
Warnung: Das Einfügen zusätzlicher Zeichen der Länge Null hat keinen Einfluss auf das Lesen. Es wirkt sich jedoch auf Text aus, der in die Zwischenablage kopiert wird (diese Zeichen werden natürlich auch kopiert). Wenn der Text aus der Zwischenablage später in einer Suchfunktion in der Web-App verwendet wird, wird die Suche unterbrochen. Obwohl diese Lösung in einigen bekannten Webanwendungen zu sehen ist, vermeiden Sie sie nach Möglichkeit.
Vielleicht ist die Ausgabe davon etwas besser, wenn Sie bei ausreichend langen Wörtern einen weichen Bindestrich einfügen jeden Zeichen, damit der Browser das Wort am rechten Rand des enthaltenden Elements zuverlässig umbrechen kann.
– Mark Amery
20. Januar 2019 um 18:06 Uhr
Dies ist zwar eine praktikable Lösung, der scheinbar harmlose Vorschlag, etwas hinzuzufügen “nach jedem, sagen wir, 20. Zeichen” ist voller Fallen, wenn Sie dies programmgesteuert auf Ihrem Server tun möchten. Iteration über die Zeichen eines Unicode-Strings ist in den meisten Programmiersprachen schwierig. Bei Besteeine Sprache kann es einfach machen, über Unicode-Codepunkte zu iterieren, aber das sind nicht unbedingt das, was wir als “Zeichen” bezeichnen möchten (z é kann als zwei Codepunkte geschrieben werden). Wir meinen wahrscheinlich wirklich “Grapheme”, aber ich weiß es nicht irgendein Sprache, die es trivial macht, diese zu durchlaufen.
– Mark Amery
20. Januar 2019 um 18:17 Uhr
@MarkAmery du hast recht. Aber selbst mit reinem ASCII ist das nicht so toll. Ich habe “Warnungen” hinzugefügt.
– Piotr Findeisen
21. Januar 2019 um 19:57 Uhr
9238800cookie-checkZeilenumbruch in einer HTML-Tabelleyes
Bindestrich hinzufügen.
Dies ist eine Präsentation.– KV Prajapati
11. August 2009 um 6:27 Uhr
Leider stammt der Text darin von nutzergenerierten Inhalten. Natürlich könnte ich es vorverarbeiten und den Bindestrich hinzufügen, aber ich hatte gehofft, dass es einen besseren Weg geben würde.
– psychotik
11. August 2009 um 6:36 Uhr
Ich entschuldige mich für die Verwendung des Wortes “harter Bindestrich”. In HTML wird der einfache Bindestrich durch das Zeichen „-“ (- oder -) dargestellt. Der weiche Bindestrich wird durch die Zeichenentitätsreferenz ( oder )
– KV Prajapati
11. August 2009 um 6:58 Uhr
Verwenden Sie wirklich
break-work
? Vielleicht könnte das damit zu tun haben.– Ms2ger
11. August 2009 um 9:15 Uhr
Wenn Sie hier sind, möchten Sie vielleicht auch einen Blick darauf werfen
white-space: pre-wrap
developer.mozilla.org/en-US/docs/Web/CSS/white-space– Tom Prats
5. August 2014 um 15:43 Uhr