Wie kann der Inhalt von Tabellenzellen <td> umbrochen werden?

146

Hier ist die gesamte Seite * wrappable in einer main.css-Datei definiert

/* Wrappable cell
* Add this class to make sure the text in a cell will wrap.
* By default, data_table tds do not wrap.
*/
td.wrappable,
table.data_table td.wrappable {
    white-space: normal;
}

Hier ist die ganze Seite:

<%@ include file="../../include/pre-header.html" %>
<form id="commentForm" name="commentForm" action="" method="post">



    <ctl:vertScroll height="300" headerStyleClass="data_table_scroll" bodyStyleClass="data_table_scroll" enabled="${user.scrollTables}">
        <ctl:sortableTblHdrSetup topTotal="false" href="show.whatif_edit_entry?   entryId=${entry.entryId}" />
        <table class="data_table vert_scroll_table">



            </tr>
            <tr>
                <ctl:sortableTblHdr styleClass="center" title="Comments" property="comment" type="top">Comments</ctl:sortableTblHdr>
            </tr>


            <c:forEach var="comments" items="${entry.comments}">


                <tr id="id${comments.id}">
                    <td id="comments-${comments.id}" class="wrappable" style="width:400px;">${comments.comment}</td>
                </tr>



            </c:forEach>
            <c:if test="${lock.locked || form.entryId < 0 }">
                <%-- This is the row for adding a new comment. --%>
                    <tr id="commentRow">
                        <td><input type="text" id="comment" name="comment" size="50" maxlength="250" onkeypress="javascript:return noenter();" />
                            <a href="javascript:addComment();"><img src="../images/icon_add.gif" border="0" alt="Add"/></a>
                        </td>

                    </tr>
            </c:if>

        </table>

    </ctl:vertScroll>
</form>

Es erstreckt sich nur jedes Mal, wenn ich einreiche.
Diese Seite befindet sich auch innerhalb eines Div. Muss ich auch die Breite des Div und der Tabelle einstellen?

html  css  html-table 
— Doc Holiday
quelle
1
Wo definieren Sie wrappable?
— Kanon
2
Wo ist die .wrappableKlasse definiert? Welchen Browser benutzt du?
— Dani
Der verwendete Browser ist besonders wichtig - alte Versionen des IE werden nicht unterstützt max-width. Es gibt viele andere Dinge, die das Problem sein könnten, und es ist unmöglich, ohne weitere Informationen zu sagen, aber das ist eines, das kaputt gehen kann.
— Chris Morgan
Ich versuche im Grunde nur, den eingereichten Text so zu halten, dass er innerhalb einer Breite bleibt und die Tabelle nicht dehnt, nachdem ich ihn sybmitiert habe
— Doc Holiday
— Harsh Vakharia

Antworten:

291

Verwenden Sie table-layout:fixedin der Tabelle und word-wrap:break-wordim td.

Siehe dieses Beispiel:

<html>
<head>
   <style>
   table {border-collapse:collapse; table-layout:fixed; width:310px;}
   table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}
   </style>
</head>

<body>
   <table>
      <tr>
         <td>1</td>
         <td>Lorem Ipsum</td>
         <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
      </tr>
      <tr>
         <td>2</td>
         <td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
         <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
      </tr>
      <tr>
         <td>3</td>
         <td></td>
         <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
      </tr>
   </table>
</body>
</html>

DEMO:

table {border-collapse:collapse; table-layout:fixed; width:310px;}
       table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}
       <table>
          <tr>
             <td>1</td>
             <td>Lorem Ipsum</td>
             <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
          </tr>
          <tr>
             <td>2</td>
             <td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
             <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
          </tr>
          <tr>
             <td>3</td>
             <td></td>
             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
          </tr>
       </table>
Erweitern Sie das Snippet

— jim31415
quelle
Sie sollten das Rand-Kollaps-Kollaps-Bit im oberen Teil Ihrer Antwort hinzufügen, damit Personen, die Ihre Antwort visuell scannen, schnell die vollständige Antwort erhalten können.
— Dwoodwardgb
für etwas mehr Modifikationen Tabelle {Border-Collapse: Collapse; Tabellenlayout: fest; Zeilenumbruch: Umbruchwort;} Tabelle td {Breite: 100px; Zeilenumbruch:
— Umbruchwort
44

Es funktioniert für mich.

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

— Lavekush Agrawal
quelle
15 
td {
overflow: hidden;
max-width: 400px;
word-wrap: break-word;
}
— Jafstar
quelle
6
Vielleicht können Sie den Code erklären, damit es für jeden klar ist
— Federico
es zeigt eine ordentliche Tabelle, aber der Inhalt wird geschnitten; dh. kann einige Wörter nicht sehen, wenn sein großer Inhalt. overflow:hidden
— wpcoder
Das Hardcodieren der maximalen Breite ist jedoch nicht gut. Es lässt sich nicht so gut auf große Auflösungen usw. skalieren. Sie möchten, dass die Tabelle korrekt auf die Größe reagiert.
— user959690
4

Wenn Sie eine auf Bootstrap reagierende Tabelle verwenden, möchten Sie nur die maximale Breite für eine bestimmte Spalte festlegen und Text umbrechen, sodass der folgende Stil für diese Spalte ebenfalls funktioniert

max-width:someValue;
word-wrap:break-word
— Feng Han
quelle
5
Beachten Sie, dass max-widthdies ein pxWert sein muss, nicht%
— maxedison
3

Dies funktionierte für mich, als ich "hübsches" JSON in einer Zelle anzeigen musste:

td { white-space:pre }

Mehr über die white-spaceImmobilie :

  • normal : Dieser Wert weist Benutzeragenten an, Leerzeichenfolgen zu reduzieren und Zeilen nach Bedarf zu unterbrechen, um Zeilenfelder zu füllen.

  • pre: Dieser Wert verhindert, dass Benutzeragenten Leerzeichenfolgen reduzieren.
    Zeilen werden nur bei erhaltenen Zeilenumbrüchen unterbrochen.

  • nowrap: Dieser Wert reduziert Leerzeichen wie für normal, unterdrückt jedoch Zeilenumbrüche im Text.

  • pre-wrap: Dieser Wert verhindert, dass Benutzeragenten Leerzeichenfolgen reduzieren.
    Zeilen werden bei beibehaltenen Zeilenumbrüchen und bei Bedarf zum Füllen von Zeilenfeldern unterbrochen.

  • pre-line: Dieser Wert weist Benutzeragenten an, Leerzeichenfolgen zu reduzieren.
    Zeilen werden bei beibehaltenen Zeilenumbrüchen und bei Bedarf zum Füllen von Zeilenfeldern unterbrochen.

(Weitere Informationen finden Sie auch an der Quelle .)

— ashleedawg
quelle
0

Wenn Sie die Spalte reparieren möchten, sollten Sie die Breite festlegen. Beispielsweise:

<td style="width:100px;">some data</td>

— Eugene
quelle
1
Ich habe versucht, dass ... die Tabelle aus irgendeinem Grund immer weiter erweitert wird >
— Doc Holiday
0

Dies ist eine weitere Möglichkeit, das Problem zu beheben, wenn Sie lange Zeichenfolgen haben (z. B. Dateipfadnamen) und die Zeichenfolgen nur für bestimmte Zeichen (z. B. Schrägstriche) unterbrechen möchten. Sie können Unicode Zero Width Space- Zeichen unmittelbar vor (oder nach) den Schrägstrichen in den HTML-Code einfügen .

— Mark Lakata
quelle
0 
.wrappable { 
      overflow: hidden; 
      max-width: 400px; 
      word-wrap: break-word; 
}

Ich habe mit den Binärdaten getestet und es funktioniert hier perfekt.

— jaip
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.