Wie kann ich Text ohne Leerzeichen in ein <td> einschließen?

Ich habe verwendet:

word-break:break-all;
table-layout:fixed;

und der Text wird in Chrome, aber nicht in Firefox umbrochen.

Update: Ich habe beschlossen, das Design so zu ändern, dass es nicht umwickelt werden muss. Der Versuch, einen CSS-Fix / Hack zu lösen, erwies sich als zu frustrierend und zeitaufwändig.

Versuchen Sie dies, ich denke, dies wird für etwas funktionieren, das "AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGG" produziert

AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G

Ich habe mein Beispiel von verschiedenen Websites bei Google übernommen. Ich habe dies auf ff 5.0, IE 8.0 und Chrome 10 getestet.

.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;                  /* CSS3 */
    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>

Verwenden Sie CSS3 word-wrap: break-word;. Funktioniert auch in WebKit-basierten Browsern (Safari, Chrome).

Update : Ich habe vergessen, das betreffende Element muss jedoch entweder implizit oder explizit als festes Element positioniert oder als Blockelement angezeigt werden. tdVerwenden Sie für Tabellenzellen ( ) display: inline-block;.

Versuchen Sie für ein automatisches Tabellenlayout, das betreffende td so zu gestalten, dass die Attribute max-width und word-wrap kombiniert werden.

Z.B: <td style="max-width:175px; word-wrap:break-word;"> ... </td>

Getestet in Firefox 32, Chrome 37 und IE11.

Hier ist eine erweiterte Version dessen, was OP gefragt hat.

Manchmal möchte unser Kunde, dass wir nach einem Wortumbruch bis zum Zeilenende ein '-' geben.

Mögen

AAAAAAAAAAAAAAAAAAAAAAABBBBBBBBBBB

Brechen

AAAAAAAAAAAAAAAAAAAAAAA-
BBBBBBBBB

Wenn dies unterstützt wird, gibt es eine neue CSS-Eigenschaft, die normalerweise in den neuesten Browsern unterstützt wird.

.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 diesen.

Ich hoffe, jemand wird eine solche Nachfrage haben.

Sie können Leerzeichen mit der Breite Null (& # 8203;) manuell einfügen, um Haltepunkte zu erstellen.

Legen Sie eine Spaltenbreite für das tdTag fest.

Ich denke, dies ist ein langjähriges Problem in Firefox, das auf Mozilla und Netscape zurückgeht. Ich wette, Sie hatten das Problem mit der Anzeige langer URLs. Ich denke, es ist eher ein Problem mit der Rendering-Engine als etwas, das Sie mit CSS beheben können, ohne hässliche Hacks.

Sinnvoll, das Design zu ändern.

Dies sah jedoch hoffnungsvoll aus: http://hacks.mozilla.org/2009/06/word-wrap/

Ich verwende Angular für mein Projekt und habe 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 es nicht sehen, aber nachdem $1es ein unsichtbares Leerzeichen gibt (danke @kingjeffrey für den Tipp), das Wortumbrüche für Tabellenzellen ermöglichte.

Eine etwas hackige Methode besteht darin, den Text so zu verarbeiten, dass zwischen den einzelnen Buchstaben Platz bleibt. Ersetzen Sie Leerzeichen durch  Dann verwenden Sie das css-Attribut mit Buchstabenabstand, um die Leerzeichen zu verringern.

Ich weiß, es ist ein Hack ... aber wenn NICHTS anderes funktioniert, sollte es ohne Probleme verpackt werden.