Zeilenumbruch in eine HTML-Tabelle

Ich habe verwendet word-wrap: break-word, um Text in divs und spans zu verpacken . In Tabellenzellen scheint es jedoch nicht zu funktionieren. Ich habe eine Tabelle width:100%mit einer Zeile und zwei Spalten. Text in Spalten word-wrapwird nicht umgebrochen , obwohl er wie oben beschrieben gestaltet ist . Dadurch überschreitet der Text die Grenzen der Zelle. Dies geschieht in Firefox, Google Chrome und Internet Explorer.

So sieht die Quelle aus:

td {
  border: 1px solid;
}

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-wrap: break-word;">
        Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </div>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

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 ausprobierttext-wrap:suppress undtext-wrap:normal , aber keiner hat geholfen.

Das Folgende funktioniert für mich in Internet Explorer. Beachten Sie das Hinzufügen des table-layout:fixedCSS-Attributs

td {
  border: 1px solid;
}

<table style="table-layout: fixed; width: 100%">
  <tr>
    <td style="word-wrap: break-word">
      LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
    </td>
  </tr>
</table>

<td style="word-break:break-all;">longtextwithoutspace</td>

oder

<span style="word-break:break-all;">longtextwithoutspace</span>

Ein langer Versuch, aber überprüfen Sie mit Firebug (oder ähnlichem), ob Sie nicht versehentlich die folgende Regel erben:

white-space:nowrap;

Dies kann Ihr angegebenes Zeilenumbruchverhalten überschreiben .

Es stellt sich heraus, dass es keinen guten Weg gibt, dies zu tun. Das nächste, was ich kam, ist das Hinzufügen von "Überlauf: versteckt"; zum div um den Tisch und den Text zu verlieren. Die wirkliche Lösung scheint jedoch darin zu bestehen, den Tisch loszuwerden. Mit divs und relativer Positionierung konnte ich den gleichen Effekt erzielen, abzüglich des Erbes von<table>

UPDATE 2015: Dies ist für diejenigen wie mich, die diese Antwort wollen. Nach 6 Jahren funktioniert dies dank aller Mitwirkenden.

* { // this works for all but td
  word-wrap:break-word;
}

table { // this somehow makes it work for td
  table-layout:fixed;
  width:100%;
}

Wie bereits erwähnt, divfunktioniert das Einfügen des Textes fast. Sie haben soeben die angeben müssen widthvon derdiv , die für Layouts ist das Glück , die statisch sind.

Dies funktioniert unter FF 3.6, IE 8, Chrome.

<td>
  <div style="width: 442px; word-wrap: break-word">
    <!-- Long Content Here-->
  </div>
</td>

Problemumgehung, die Overflow-Wrap verwendet und mit normalem Tabellenlayout + Tabellenbreite 100% einwandfrei funktioniert

https://jsfiddle.net/krf0v6pw/

HTML

<table>
  <tr>
    <td class="overflow-wrap-hack">
      <div class="content">
        wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
      </div>
    </td>
  </tr>
</table>

CSS

.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-wordstattword-break:break-all . Was besser ist, weil es versucht, zuerst Leerzeichen zu durchbrechen und das Wort nur dann abschneidet, wenn das Wort größer als der Container ist.
• Nicht table-layout:fixedbenötigt. Verwenden Sie Ihre reguläre automatische Größenanpassung.
• Nicht erforderlich, um fest widthoder fest max-widthin Pixel zu definieren . Definieren Sie %bei Bedarf das übergeordnete Element.

Getestet in FF57, Chrome62, IE11, Safari11

Ändern Sie Ihren Code

word-wrap: break-word;

zu

word-break:break-all;

Beispiel

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-break:break-all;">longtextwithoutspacelongtextwithoutspace Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content</div>
    </td>
    <td><span style="display: inline;">Short Content</span>
    </td>
  </tr>
</table>

Problem mit

<td style="word-break:break-all;">longtextwithoutspace</td>

ist , dass es nicht so gut , wenn Text funktioniert hat einige Räume, zB

<td style="word-break:break-all;">long text with andthenlongerwithoutspaces</td>

Wenn das Wort andthenlongerwithoutspacesin einer Zeile in die Tabellenzelle passt, dies long text with andthenlongerwithoutspacesjedoch nicht, wird das lange Wort in zwei Teile geteilt, anstatt umbrochen zu werden.

Alternative Lösung: Fügen Sie U + 200B ( ZWSP ), U + 00AD ( weicher Bindestrich ) oder U + 200C ( ZWNJ ) in jedes lange Wort nach beispielsweise dem 20. Zeichen ein (siehe jedoch Warnung unten):

td {
  border: 1px solid;
}

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-wrap: break-word;">
        Looooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooong word
      </div>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

Warnung : Das Einfügen zusätzlicher Zeichen mit der Länge Null hat keinen Einfluss auf das Lesen. Dies wirkt sich jedoch auf Text aus, der in die Zwischenablage kopiert wird (diese Zeichen werden natürlich auch kopiert). Wenn der Text in 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 finden ist, sollten Sie sie nach Möglichkeit vermeiden.

Warnung : Wenn Sie zusätzliche Zeichen einfügen, sollten Sie nicht mehrere Codepunkte innerhalb des Graphems trennen. Weitere Informationen finden Sie unter https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries .

Schauen Sie sich diese Demo an

   <table style="width: 100%;">
    <tr>
        <td><div style="word-break:break-all;">LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord</div>
        </td>
        <td>
            <span style="display: inline;">Foo</span>
        </td>
    </tr>
</table>

Hier ist der Link zum Lesen

Getestet in IE 8 und Chrome 13.

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td>
              <div style="word-wrap: break-word;">
                 longtexthere
              </div>
        </td>
        <td><span style="display: inline;">Foo</span></td>
    </tr>
</table>

Dadurch passt die Tabelle an die Breite der Seite an und jede Spalte nimmt 50% der Breite ein.

Wenn Sie die erste Spalte lieber mehr von der Seite zu nehmen, fügen Sie ein width: 80%zu der tdwie im folgenden Beispiel, 80% mit dem Prozentsatz Ihrer Wahl ersetzen.

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td style="width:80%">
               <div style="word-wrap: break-word;">
                 longtexthere
               </div>
            </td>
        <td><span style="display: inline;">Foo</span></td>
    </tr>
</table>

Das einzige, was getan werden muss, ist, dem <td>oder dem <div>Inneren <td>je nach dem Layout, das Sie erreichen möchten, eine Breite hinzuzufügen .

z.B:

<table style="width: 100%;" border="1"><tr>
<td><div style="word-wrap: break-word; width: 100px;">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
<td><span style="display: inline;">Foo</span></td>
</tr></table>

oder

 <table style="width: 100%;" border="1"><tr>
    <td width="100" ><div style="word-wrap: break-word; ">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
    <td><span style="display: inline;">Foo</span></td>

</tr></table>

Die Antwort, die das Kopfgeld gewonnen hat, ist richtig, funktioniert jedoch nicht, wenn die erste Zeile der Tabelle eine zusammengeführte / verbundene Zelle enthält (alle Zellen erhalten die gleiche Breite).

In diesem Fall sollten Sie die Tags colgroupund verwenden col, um sie richtig anzuzeigen:

<table style="table-layout: fixed; width: 200px">
<colgroup>
    <col style="width: 30%;">
    <col style="width: 70%;">
</colgroup>
<tr>
    <td colspan="2">Merged cell</td>
</tr>
<tr>
    <td style="word-wrap: break-word">VeryLongWordInThisCell</td>
    <td style="word-wrap: break-word">Cell 2</td>
</tr>
</table>

<p style="overflow:hidden; width:200px; word-wrap:break-word;">longtexthere<p>

Es scheint, dass Sie word-wrap:break-word;ein Blockelement ( div) mit der angegebenen (nicht relativen) Breite festlegen müssen . Ex:

<table style="width: 100%;"><tr>
    <td><div style="display:block; word-wrap: break-word; width: 40em;">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word</div></td>
    <td><span style="display: inline;">Foo</span></td>
</tr></table>

oder mit word-break:break-alldem Vorschlag von Abhishek Simon.

Das funktioniert bei mir:

<style type="text/css">
    td {

        /* CSS 3 */
        white-space: -o-pre-wrap;
        word-wrap: break-word;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
    }

Das Tabellenattribut lautet:

   table {
      table-layout: fixed;
      width: 100%
   }

</style>

Wenn Sie keinen Tabellenrand benötigen, wenden Sie Folgendes an:

table{
    table-layout:fixed;
    border-collapse:collapse;
}
td{
    word-wrap: break-word;
}

Ich habe eine Lösung gefunden, die in Firefox, Google Chrome und Internet Explorer 7-9 zu funktionieren scheint. Für ein zweispaltiges Tabellenlayout mit langem Text auf der einen Seite. Ich habe überall nach ähnlichen Problemen gesucht, und was in einem Browser funktioniert hat, hat den anderen kaputt gemacht, oder das Hinzufügen weiterer Tags zu einer Tabelle scheint nur eine schlechte Codierung zu sein.

Ich habe dafür KEINEN Tisch benutzt. DL DT DD zur Rettung. Zumindest zum Korrigieren eines zweispaltigen Layouts ist dies im Grunde ein Glossar / Wörterbuch / Wortbedeutungs-Setup.

Und etwas generisches Styling.

    dl {
        margin-bottom:50px;
    }

    dl dt {
        background:#ccc;
        color:#fff;
        float:left;
        font-weight:bold;
        margin-right:10px;
        padding:5px;
        width:100px;
    }

    dl dd {
        margin:2px 0;
        padding:5px 0;
        word-wrap:break-word;
        margin-left:120px;
    }

<dl>
    <dt>test1</dt>
    <dd>Fusce ultricies mi nec orci tempor sit amet</dd>
    <dt>test2</dt>
    <dd>Fusce ultricies</dd>
    <dt>longest</dt>
    <dd>
        Loremipsumdolorsitametconsecteturadipingemipsumdolorsitametconsecteturaelit.Nulla
        laoreet ante et turpis vulputate condimentum. In in elit nisl. Fusce ultricies
        mi nec orci tempor sit amet luctus dui convallis. Fusce viverra rutrum ipsum,
        in sagittis eros elementum eget. Class aptent taciti sociosqu ad litora
        torquent per conubia nostra, per.
    </dd>
</dl>

Mit schwebendem Zeilenumbruch und Rand links bekam ich genau das, was ich brauchte. Ich dachte nur, ich würde dies mit anderen teilen, vielleicht hilft es jemand anderem mit einem zweispaltigen Layout im Definitionsstil, mit Problemen beim Umschließen der Wörter.

Ich habe versucht, Zeilenumbruch in der Tabellenzelle zu verwenden, aber es funktionierte nur in Internet Explorer 9 (und natürlich in Firefox und Google Chrome), hauptsächlich um den defekten Internet Explorer-Browser hier zu reparieren.

Tabellen werden standardmäßig umbrochen. Stellen Sie daher sicher, dass die Tabellenzellen wie folgt angezeigt werden table-cell:

td {
   display: table-cell;
}

style = "Tabellenlayout: fest; Breite: 98%; Zeilenumbruch: Umbruchwort"

<table bgcolor="white" id="dis" style="table-layout:fixed; width:98%; word-wrap:break-word" border="0" cellpadding="5" cellspacing="0" bordercolordark="white" bordercolorlight="white" >

Demo - http://jsfiddle.net/Ne4BR/749/

Das hat bei mir super funktioniert. Ich hatte lange Links, die dazu führten, dass die Tabelle in Webbrowsern 100% überschritt. Getestet auf IE, Chrome, Android und Safari.

Eine Lösung, die mit Google Chrome und Firefox funktioniert (nicht mit Internet Explorer getestet), besteht darin, display: table-cellein Blockelement festzulegen.

Sie können dies versuchen, wenn es Ihnen passt ...

Fügen Sie einen Textbereich in Ihr td ein und deaktivieren Sie ihn mit der Hintergrundfarbe Weiß und definieren Sie die Anzahl der Zeilen.

<table style="width: 100%;">
  <tr>
    <td>
        <textarea rows="4" style="background-color:white;border: none;" disabled>      Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </textarea>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>