Ich habe verwendet:CSS: Wie umgehe ich Text ohne Leerzeichen innerhalb einer ?
word-break:break-all;
table-layout:fixed
und der Text hüllt in Chrome, aber nicht Firefox.
Update: Ich entschied mich, das Design zu ändern, so dass es nicht die Verpackung brauchte; Der Versuch, einen CSS-Fix/Hack zu lösen, erwies sich als zu frustrierend und zeitraubend.
Legen Sie eine Spaltenbreite für den Tag td fest.
Verwenden Sie CSS3 word-wrap: break-word;. Funktioniert auch in WebKit-basierten Browsern (Safari, Chrome).
Update: Ich habe vergessen, das fragliche Element muss jedoch entweder implizit oder explizit als festes Element positioniert oder als Blockelement angezeigt werden. Verwenden Sie für Tabellenzellen (td) display: inline-block;.
Versucht dies auch, aber nicht für mich in Firefox 3.6.6 – FunLovinCoder
Ich versuchte beide (separat), aber leider vermasselt sie die Tabelle Formatierung ziemlich schlecht. – FunLovinCoder
Meine schlechte, verwenden Sie 'display: Inline-Block;'. – BalusC
Eine leicht hackische Art, dies zu tun, besteht darin, den Text so zu bearbeiten, dass zwischen jedem Buchstaben ein Leerzeichen eingefügt wird. Ersetzen Sie die Leerzeichen mit . Verwenden Sie dann das CSS-Attribut für den Buchstabenabstand, um die Leerzeichen zu reduzieren.
Ich weiß, es ist ein Hack ... aber wenn nichts anderes funktioniert, sollte es ohne Problem wickeln.
Es ist so hacky, so störende korrekte Indizierung und so schwer zu implementieren sollte es überhaupt keine Antwort sein :-) – Capsule
Sie können Leerstellen mit einer Breite von Null (& # 8203;) manuell einfügen, um Haltepunkte zu erstellen.
Es gibt auch eine nicht-standard-HTML-Tag '
Ich denke, das ist ein langjähriges Problem in Firefox, das auf Mozilla und Netscape zurückgeht. Ich wette, Sie hatten das Problem mit der Anzeige von langen URLs. Ich denke, es ist ein Problem mit der Rendering-Engine, anstatt etwas, das Sie mit CSS reparieren können, ohne hässliche Hacks.
Es ist sinnvoll, das Design zu ändern.
Das sah hoffnungsvoll aber: http://hacks.mozilla.org/2009/06/word-wrap/
diese versuchen, ich denke, das ist für so etwas wie „AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGG“ arbeiten produzieren
AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G
ich mein Beispiel von ein paar verschiedene Websites auf Google genommen haben . Ich habe dies auf 8,0 ff 5.0, IE getestet und Chrome 10.en
.wrapword{
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -webkit-pre-wrap; /*Chrome & Safari */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* css-3 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
word-break: break-all;
white-space: normal;
}
<table style="table-layout:fixed; width:400px">
<tr>
<td class="wrapword">
</td>
</tr>
</table>
enx brad. Ihre Antwort hat mein Problem – SyntaxError
Autsch !! Dies wird jedes Wort an beliebigen Stellen brechen, auch wenn es nicht benötigt wird. Gibt es eine Problemumgehung, um Wörter nur dann zu unterbrechen, wenn die Breite des Containers nicht überschritten werden soll? Das heißt, damit es funktioniert, soll "word-wrap: break-wird" überhaupt funktionieren, wenn es nicht fehlerhaft ist? – matteo
Dies sollte eine korrekte Antwort sein. Schade, dass OP gestorben ist. – Pamela
Für ein automatisches Tabellenlayout versuchen, die betroffenen td Kombinieren des Attributs max-width und Zeilenumbruch stylen.
ZB: <td style="max-width:175px; word-wrap:break-word;"> ... </td>
in Firefox Getestet 32, Chrome 37 und IE11.
Ich verstehe nicht warum, aber es * nur * arbeitet mit 'max-width', und nicht mit 'Breite'. Nichtsdestotrotz die beste Lösung für mich, weil es Wörter an beliebigen Stellen nicht aufbricht. – Raziel
Ich verwende Angular für mein Projekt, und es geschafft, dies mit einem einfachen Filter zu lösen:
Vorlage:
<td>{{string | wordBreak}}</td>
Filter:
app.filter('wordBreak', function() {
return function(string) {
return string.replace(/(.{1})/g, '$1');
}
})
Sie können nicht sehen es, aber nach $1 gibt es einen unsichtbaren Platz (Danke @kingjeffrey für den Tipp), die Wortumbrüche für Tabellenzellen aktiviert.
Hier ist eine erweiterte Version von was OP gefragt.
Manchmal ist es so, dass unser Kunde möchte, dass wir nach einem Wortbruch bis zum Ende der Zeile ein "-" geben.
Wie
AAAAAAAAAAAAAAAAAAAAAAABBBBBBBBBBB
Pause
AAAAAAAAAAAAAAAAAAAAAAA-
BBBBBBBBB
So gibt es neue CSS-Eigenschaft, wenn unterstützt, in der Regel in neuesten Browsern unterstützt.
.dont-break-out {
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
/* This is the dangerous one in WebKit, as it breaks things wherever */
word-break: break-all;
/* Instead use this non-standard one: */
word-break: break-word;
/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
Ich benutze dieses.
Ich hoffe, dass jemand solche Nachfrage haben wird.
Heiliger Jesus ... Ich habe vergessen, 'table-layout: fixed' in die Tabelle einzufügen und so bekam ich nicht das gewünschte Verhalten. Deine Frage hat mich gerettet! ; D –