it-swarm.com.de

Wie erzwingen Sie den Tabellenzelleninhalt <td>?

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 gesamte 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 einfach jedes Mal, wenn ich mich einschalte.
Diese Seite befindet sich auch in einem Div. Muss ich auch die Breite der div und der Tabelle einstellen?

133
Doc Holiday

Verwenden Sie table-layout:fixed in der Tabelle und Word-wrap:break-Word im 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>
    

254
jim31415

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; 

}

Und das Tabellenattribut lautet:

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

40
td {
overflow: hidden;
max-width: 400px;
Word-wrap: break-Word;
}
11
Jafstar

Wenn Sie eine Bootstrap-Responsive-Tabelle verwenden, möchten Sie einfach die maximale Breite für eine bestimmte Spalte festlegen und Textumbruch vornehmen, sodass der Stil dieser Spalte wie folgt funktioniert

max-width:someValue;
Word-wrap:break-Word
4
Feng Han

Dies ist eine andere Möglichkeit, das Problem zu lösen, wenn Sie lange Zeichenfolgen (wie Dateinamen) haben und die Zeichenfolgen nur für bestimmte Zeichen (wie Schrägstriche) auflösen möchten. Sie können Unicode Zero Width Space Zeichen unmittelbar vor (oder nach) den Schrägstrichen im HTML-Code einfügen.

0
Mark Lakata

Wenn Sie die Spalte fixieren möchten, sollten Sie die Breite festlegen. Zum Beispiel:

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

0
Evgeniy

Fügen Sie einfach: Word-break: break-Word; zu Ihrer Tabellenklasse hinzu.

0

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

td { white-space:pre }

Mehr über die white-space-Eigenschaft :

  • normal: Dieser Wert weist Benutzeragenten an, Sequenzen von Leerzeichen zu minimieren und Zeilen nach Bedarf um Zeilenfelder zu füllen. 

  • pre: Dieser Wert verhindert, dass Benutzerprogramme Sequenzen von Leerzeichen reduzieren.
    Zeilen werden nur bei beibehaltenen Zeilenumbrüchen unterbrochen. 

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

  • pre-wrap: Dieser Wert verhindert, dass Benutzerprogramme Sequenzen von Leerzeichen minimieren.
    Zeilen werden unterbrochen, wenn Zeilenumbrüche beibehalten werden und Zeilenfelder nach Bedarf ausgefüllt werden. 

  • pre-line: Dieser Wert weist Benutzeragenten an, Sequenzen von Leerzeichen zu minimieren.
    Zeilen werden unterbrochen, wenn Zeilenumbrüche beibehalten werden und Zeilenfelder nach Bedarf ausgefüllt werden. 

(Siehe auch mehr unter source .)

0
ashleedawg
.wrappable { 
      overflow: hidden; 
      max-width: 400px; 
      Word-wrap: break-Word; 
}

Ich habe mit den binären Daten getestet und funktioniert hier perfekt.

0
jaip