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

87

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.

css

— FunLovinCoder
quelle

196

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>

— Stirling
quelle

10

Autsch!! Dies erzwingt das Brechen JEDES Wortes an beliebigen Punkten, selbst wenn es nicht benötigt wird. Gibt es eine Problemumgehung, um diese Unterbrechungswörter NUR dann zu verwenden, wenn die Breite des Containers nicht überschritten werden darf? Das heißt, damit es so funktioniert, wie "word-wrap: break-wird" überhaupt funktionieren soll, wenn es nicht fehlerhaft ist?

— Matto

1

@matteo diese Antwort funktionierte aus genau diesem Grund besser für mich: stackoverflow.com/a/18706058/234132

— dochoffiday

1

Force Breaking Problem kann mitword-break: break-word;

— user1721713

1

Ich habe mich angemeldet, um den Überlauf zu stapeln, nur um das zu mögen

— falky

24

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

— BalusC
quelle

1

Ich habe beide (separat) ausprobiert, aber leider haben sie die Tabellenformatierung ziemlich durcheinander gebracht.

— FunLovinCoder

Mein schlechtes, verwenden display: inline-block;.

— BalusC

11

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.

— XDM
quelle

Ich verstehe nicht warum, aber es funktioniert nur mit max-widthund nicht mit width. Trotzdem die beste Lösung für mich, weil sie Wörter nicht an beliebigen Punkten aufbricht.

— Raziel

11

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.

— Rahul
quelle

4

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

— Kingjeffrey
quelle

1

Es gibt auch ein nicht standardmäßiges HTML-Tag <wbr>[für "Wortumbruch"]. Hier ist die Browser-Unterstützung für diese und die Lösung: quirksmode.org/oddsandends/wbr.html

— kingjeffrey

3

Legen Sie eine Spaltenbreite für das tdTag fest.

— Schwarzer Frosch
quelle

0

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/

— dunxd
quelle

0

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.

— Jeffrey Roosendaal
quelle

-1

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.

— Armstrongest
quelle

2

Es ist so hackig, so störend die korrekte Indizierung und so schwer zu implementieren, dass es überhaupt keine Antwort sein sollte :-)

— Kapsel