it-swarm.com.de

Zeilenumbruch in einer HTML-Tabelle

Ich habe Word-wrap: break-Word verwendet, um Text in divs und spans zu schreiben. In Tabellenzellen scheint es jedoch nicht zu funktionieren. Ich habe eine Tabelle auf width:100% gesetzt, mit einer Zeile und zwei Spalten. Text in Spalten wird, obwohl mit dem obigen Word-wrap formatiert, nicht umgebrochen. Es bewirkt, dass der Text die Grenzen der Zelle überschreitet. 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 von text-wrap:suppress und text-wrap:normal ausprobiert, aber keiner hat geholfen.

531
psychotik

Folgendes funktioniert für mich im Internet Explorer. Beachten Sie das Hinzufügen des CSS-Attributs table-layout:fixed

td {
  border: 1px solid;
}
<table style="table-layout: fixed; width: 100%">
  <tr>
    <td style="Word-wrap: break-Word">
      LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
    </td>
  </tr>
</table>
595
Marc Stober
<td style="Word-break:break-all;">longtextwithoutspace</td>

oder

<span style="Word-break:break-all;">longtextwithoutspace</span>
148
Pratik Stephen

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

white-space:nowrap;

Dies kann außer Kraft gesetzt werden Ihr angegebenes Zeilenumbruchverhalten.

118
Rick Grundy

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

PDATE 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%;
}
43
psychotik

Wie bereits erwähnt, funktioniert es fast, den Text in div zu setzen. Sie müssen nur das width des div angeben, was für statische Layouts von Vorteil ist.

Dies funktioniert mit FF 3.6, IE 8, Chrome.

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

Problemumgehung, die Überlauf verwendet und mit normalem Tabellenlayout + Tabellenbreite 100% problemlos 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-Word anstelle von _Word-break:break-all_. Was besser ist, weil es zuerst versucht, Leerzeichen zu unterbrechen und das Wort nur dann abschneidet, wenn es größer ist als der Container.
  • Nein _table-layout:fixed_ benötigt. Verwenden Sie Ihre reguläre automatische Größenanpassung.
  • Nicht erforderlich, um festes width oder festes _max-width_ in Pixel zu definieren. Definieren Sie bei Bedarf _%_ des übergeordneten Elements.

Getestet in FF57, Chrome62, IE11, Safari11

18
Alph.Dev

Ä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>
17
Duc Nguyen

Problem mit

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

ist, dass es nicht so gut funktioniert, wenn Text einige Leerzeichen hat , z.

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

Wenn das Wort andthenlongerwithoutspaces in eine Tabellenzelle in einer Zeile passt, das Wort long text with andthenlongerwithoutspaces jedoch nicht, wird das lange Wort in zwei Teile geteilt, anstatt umbrochen zu werden.

Alternative Lösung: U + 200B ( ZWSP ), U + 00AD ( weicher Bindestrich ) oder U + 200C ( ZWNJ ) einfügen in jedem langen Wort nach jedem z. B. 20. Zeichen (siehe 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 wirkt sich nicht auf das Lesen aus. Es wirkt sich jedoch auf in die Zwischenablage kopierten Text aus (diese Zeichen werden natürlich auch kopiert). Wenn der Text der Zwischenablage später in einer Suchfunktion in der Webanwendung 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 : Beim Einfügen zusätzlicher Zeichen sollten Sie nicht mehrere Codepunkte innerhalb von grapheme trennen. Weitere Informationen finden Sie unter https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries .

15
Piotr Findeisen

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>

Dies führt dazu, dass die Tabelle an die Breite der Seite angepasst wird und jede Spalte 50% der Breite einnimmt.

Wenn Sie es vorziehen, dass die erste Spalte einen größeren Teil der Seite einnimmt, fügen Sie dem td einen width: 80% hinzu, wie im folgenden Beispiel gezeigt. Ersetzen Sie dabei 80% durch den Prozentsatz Ihrer Wahl.

<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>
10
Waylon Flinn

Das einzige, was getan werden muss, ist, dem <td> oder dem <div> innerhalb des <td> Breite hinzuzufügen, je nachdem, welches Layout Sie erzielen möchten.

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>
9
ShalomSam

Check out diese Demo

<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 zu lesen

9
abi1964

Die Antwort, die das Kopfgeld gewonnen hat, ist richtig, funktioniert aber nicht, wenn die erste Zeile der Tabelle hat eine verbundene/verbundene Zelle (alle Zellen erhalten die gleiche Breite).

In diesem Fall sollten Sie die Tags colgroup und col verwenden, um es korrekt 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>
8
Indrek
<p style="overflow:hidden; width:200px; Word-wrap:break-Word;">longtexthere<p>
8

Anscheinend müssen Sie Word-wrap:break-Word; für ein Blockelement (div) mit der angegebenen (nicht relativen) Breite festlegen. 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-all gemäß Abhishek Simons Vorschlag.

7
stslavik

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

nd Tabellenattribut ist:

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

</style>
5

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

table{
    table-layout:fixed;
    border-collapse:collapse;
}
td{
    Word-wrap: break-Word;
}
4
Fusion

Tabellen werden standardmäßig umgebrochen, stellen Sie also sicher, dass die Anzeige der Tabellenzellen table-cell lautet:

td {
   display: table-cell;
}
3
ironsam

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 Langtext 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 einfach eine schlechte Codierung zu sein.

Ich habe KEINEN Tisch dafür benutzt. DL DT DD zur Rettung. Zumindest zur Korrektur eines zweispaltigen Layouts ist das im Grunde genommen ein Glossar/Wörterbuch/Wortbedeutung-Setup.

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

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

Mit fließendem Zeilenumbruch und Rand links habe ich genau das bekommen, was ich brauchte. Ich dachte nur, ich würde das mit anderen teilen, vielleicht hilft es jemandem mit einem zweispaltigen Layout im Definitionsstil, wenn er Schwierigkeiten hat, die Wörter umzubrechen.

Ich habe versucht, Word-Wrap 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 kaputten Internet Explorer-Browser hier zu reparieren.

3
Yogurt The Wise

style = "Tabellenlayout: fest; Breite: 98%; Zeilenumbruch: break-Word"

<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 geklappt. Ich hatte lange Links, die dazu führten, dass die Tabelle in Webbrowsern 100% überschritt. Getestet auf IE, Chrome, Android und Safari.

1
Bobby

Eine Lösung, die mit GoogleChromeund Firefox (nicht mit Internet Explorer getestet) funktioniert, besteht darin, display: table-cell als Blockelement festzulegen.

0
Antoine Guiral