Zeilenumbruch in einer HTML-Tabelle

Lesezeit: 8 Minuten

Zeilenumbruch in einer HTML Tabelle
psychotik

Ich habe verwendet word-wrap: break-word Text umbrechen divs und spanS. Allerdings scheint es in Tabellenzellen nicht zu funktionieren. Ich habe einen gedeckten Tisch width:100%, mit einer Zeile und zwei Spalten. Text in Spalten, obwohl wie oben gestylt word-wrap, wickelt nicht. Es bewirkt, dass der Text über die Grenzen der Zelle hinausgeht. Dies geschieht bei 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 ausprobiert text-wrap:suppress und text-wrap:normalaber beides hat nicht geholfen.

  • Bindestrich hinzufügen.

    Dies ist eine Präsentation.

    – KV Prajapati

    11. August 2009 um 6:27 Uhr

  • Leider stammt der Text darin von nutzergenerierten Inhalten. Natürlich könnte ich es vorverarbeiten und den Bindestrich hinzufügen, aber ich hatte gehofft, dass es einen besseren Weg geben würde.

    – psychotik

    11. August 2009 um 6:36 Uhr

  • Ich entschuldige mich für die Verwendung des Wortes “harter Bindestrich”. In HTML wird der einfache Bindestrich durch das Zeichen „-“ (- oder -) dargestellt. Der weiche Bindestrich wird durch die Zeichenentitätsreferenz ­ (­ oder ­)

    – KV Prajapati

    11. August 2009 um 6:58 Uhr

  • Verwenden Sie wirklich break-work? Vielleicht könnte das damit zu tun haben.

    – Ms2ger

    11. August 2009 um 9:15 Uhr

  • Wenn Sie hier sind, möchten Sie vielleicht auch einen Blick darauf werfen white-space: pre-wrap developer.mozilla.org/en-US/docs/Web/CSS/white-space

    – Tom Prats

    5. August 2014 um 15:43 Uhr

Zeilenumbruch in einer HTML Tabelle
Marc Stober

Folgendes funktioniert bei mir im Internet Explorer. Beachten Sie die Hinzufügung von table-layout:fixed CSS-Attribut

td {
  border: 1px solid;
}
<table style="table-layout: fixed; width: 100%">
  <tr>
    <td style="word-wrap: break-word">
      LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
    </td>
  </tr>
</table>

  • @ewomac ja, manchmal muss ich die VS2010-Fehler zu HTML/CSS einfach ignorieren, wenn ich weiß, dass es im Browser funktioniert.

    – Marc Stober

    11. August 2011 um 16:19 Uhr

  • @Marc!! Alter, vielen Dank dafür. Ich wurde beauftragt, eine mobile Version einer Client-Site zu erstellen, die Tabellen verwendet, und ich hatte Probleme, dies zum Laufen zu bringen! table-layout:fixed hat es geschafft!

    – debuggen

    14. September 2011 um 21:47 Uhr

  • Dadurch werden die anderen Spalten viel zu breit.

    – Clemens

    13. Dezember 2011 um 10:55 Uhr


  • Unbedingt lesen developer.mozilla.org/en-US/docs/Web/CSS/table-layout Tabellen- und Spaltenbreiten werden durch die Breite der Tabellen- und Spaltenelemente oder durch die Breite der ersten Zellenzeile festgelegt. Zellen in nachfolgenden Zeilen wirken sich nicht auf die Spaltenbreite aus. Klingt so, als wäre dies auch gut für die Leistung.

    – Sam Barnum

    9. August 2013 um 1:41 Uhr


  • @Clément siehe Indreks Antwort unten über <colgroup>es hat das für mich behoben.

    – andrewtweber

    29. Dezember 2014 um 21:46 Uhr

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

oder

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

  • Kann bestätigen, dass der Ansatz von Pratik auch auf Safari auf iOS (iPhone) funktioniert.

    – Okkulus

    24. März 2011 um 14:43 Uhr

  • Um das Problem mit einigen kurzen und einigen langen Wörtern zu umgehen, könnten Sie möglicherweise den Text vorverarbeiten und nur lange Wörter (z. B. > 40 Zeichen) in die umbrechen <span>.

    – Nornagon

    2. Juni 2011 um 8:30 Uhr

  • Dies wird nicht von Firefox, Opera unterstützt

    – Meotimdihia

    8. Juli 2011 um 22:24 Uhr

  • Dies brach nicht vorzugsweise bei Nicht-Wort-Zeichen (wenn ich beispielsweise eine Reihe kürzerer Wörter hätte, die durch Leerzeichen getrennt wären, würde es die Wörter immer bis zur Zeile laufen lassen und dann das letzte Wort in zwei Hälften brechen). Word-wrap wird Worte nur brechen, wenn es nötig ist

    – Haschbraun

    7. März 2016 um 0:31 Uhr

  • Dieser Ansatz ist besser, weil nicht erforderlich table-layout: fixed;.

    – Finesse

    7. April 2017 um 1:40 Uhr

1646314335 0 Zeilenumbruch in einer HTML Tabelle
Rick Grundy

Ein langer Schuss, aber überprüfen Sie mit Feuerwanze (oder ähnlich), dass Sie die folgende Regel nicht versehentlich erben:

white-space:nowrap;

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

  • Dies ist, was geerbt wurde und den Wortumbruch für mich gebrochen hat

    – Shane Lee

    7. Februar 2013 um 10:55 Uhr

  • @ RickGrundy In was ändern Sie es, wenn Sie dieses Problem haben?

    – kokodude

    30. Juni 2014 um 16:02 Uhr

  • @cokedude Ich bin viel zu spät hier, aber es ist white-space:normal;

    – Bier mich

    20. Januar 2016 um 19:30 Uhr

  • Dies hat mir das Problem verursacht. Danke für deinen Kommentar, er war hilfreich.

    – JeffMan

    30. Juli 2020 um 1:49 Uhr

  • Vielen Dank, Mann, Sie haben Stunden meiner Zeit gespart

    – Rittesh PV

    5. Mai 2021 um 14:39 Uhr

Zeilenumbruch in einer HTML Tabelle
psychotik

Es stellt sich heraus, dass es keinen guten Weg gibt, dies zu tun. Am nächsten kam ich dem Hinzufügen von “overflow:hidden;” zum div um den Tisch und den Text zu verlieren. Die wirkliche Lösung scheint jedoch darin zu bestehen, den Tisch fallen zu lassen. Mit divs und relativer Positionierung konnte ich den gleichen Effekt erzielen, abzüglich des Vermächtnisses von <table>

AKTUALISIERUNG 2015: Dies ist für diejenigen wie mich, die diese Antwort wollen. Nach 6 Jahren funktioniert das, danke an alle Mitwirkenden.

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

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

1646314335 485 Zeilenumbruch in einer HTML Tabelle
Loungedork

Wie bereits erwähnt, den Text einfügen div funktioniert fast. Sie müssen nur die angeben width des divwas für statische Layouts ein Glücksfall ist.

Dies funktioniert auf FF 3.6, IE 8, Chrome.

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

  • Du kannst hinzufügen min-width: 100% zusammen mit width die zu gewährleisten div nimmt die ganze Zelle ein.

    – Benutzer1091949

    16. Februar 2016 um 8:24 Uhr

  • Ich möchte Zeilenumbruch mit Komma (,) machen. Wie Long,Long,Long,Long,Long. Ich möchte dies nach einem Komma (,) umschließen.

    – Karthikeyan

    9. April 2019 um 9:30 Uhr

Problemumgehung, die Overflow-Wrap verwendet und mit normalem Tabellenlayout + Tabellenbreite 100 % gut 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 anstatt word-break:break-all. Was besser ist, weil es zuerst versucht, Leerzeichen zu unterbrechen, und das Wort nur dann abschneidet, wenn das Wort größer als sein Container ist.
  • Nein table-layout:fixed erforderlich. Verwenden Sie Ihre normale automatische Größenanpassung.
  • Nicht erforderlich, um fest zu definieren width oder fixiert max-width in Pixel. Definieren % des Elternteils ggf.

Getestet in FF57, Chrome62, IE11, Safari11

  • Du kannst hinzufügen min-width: 100% zusammen mit width die zu gewährleisten div nimmt die ganze Zelle ein.

    – Benutzer1091949

    16. Februar 2016 um 8:24 Uhr

  • Ich möchte Zeilenumbruch mit Komma (,) machen. Wie Long,Long,Long,Long,Long. Ich möchte dies nach einem Komma (,) umschließen.

    – Karthikeyan

    9. April 2019 um 9:30 Uhr

Problem mit

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

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

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

Wenn Wort andthenlongerwithoutspaces passt aber in eine Tabellenzelle in einer Zeile long text with andthenlongerwithoutspaces nicht, wird das lange Wort in zwei Teile gebrochen, anstatt umgebrochen zu werden.

Alternativlösung: U+200B einfügen (ZWSP), U+00AD (weicher Bindestrich) oder U+200C (ZWNJ) in jedem langen Wort nach jedem, sagen wir, 20. Zeichen (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 der Länge Null hat keinen Einfluss auf das Lesen. Es wirkt sich jedoch auf Text aus, der in die Zwischenablage kopiert wird (diese Zeichen werden natürlich auch kopiert). Wenn der Text aus 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 sehen ist, vermeiden Sie sie nach Möglichkeit.

WarnungHinweis: Wenn Sie zusätzliche Zeichen einfügen, sollten Sie nicht mehrere Codepunkte innerhalb von Graphem trennen. Sehen https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries Für mehr Information.

  • Vielleicht ist die Ausgabe davon etwas besser, wenn Sie bei ausreichend langen Wörtern einen weichen Bindestrich einfügen jeden Zeichen, damit der Browser das Wort am rechten Rand des enthaltenden Elements zuverlässig umbrechen kann.

    – Mark Amery

    20. Januar 2019 um 18:06 Uhr


  • Dies ist zwar eine praktikable Lösung, der scheinbar harmlose Vorschlag, etwas hinzuzufügen “nach jedem, sagen wir, 20. Zeichen” ist voller Fallen, wenn Sie dies programmgesteuert auf Ihrem Server tun möchten. Iteration über die Zeichen eines Unicode-Strings ist in den meisten Programmiersprachen schwierig. Bei Besteeine Sprache kann es einfach machen, über Unicode-Codepunkte zu iterieren, aber das sind nicht unbedingt das, was wir als “Zeichen” bezeichnen möchten (z kann als zwei Codepunkte geschrieben werden). Wir meinen wahrscheinlich wirklich “Grapheme”, aber ich weiß es nicht irgendein Sprache, die es trivial macht, diese zu durchlaufen.

    – Mark Amery

    20. Januar 2019 um 18:17 Uhr


  • @MarkAmery du hast recht. Aber selbst mit reinem ASCII ist das nicht so toll. Ich habe “Warnungen” hinzugefügt.

    – Piotr Findeisen

    21. Januar 2019 um 19:57 Uhr

923880cookie-checkZeilenumbruch in einer HTML-Tabelle

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy