Come forzare il wrapping del contenuto <td> delle celle della tabella?

146

Ecco l'intera pagina * avvolgibile è definita in un file main.css

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

Ecco l'intera pagina:

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

Si allunga ogni volta che invio.
Questa pagina è anche all'interno di un div. Devo impostare anche la larghezza del div e della tabella?

html  css  html-table 
— Doc Holiday
fonte
1
Dove stai definendo wrappable?
— canone
2
Dove viene .wrappabledefinita la classe? Quale browser utilizzate?
— Dani,
Il browser utilizzato è particolarmente importante --- le vecchie versioni di IE non supportano max-width. Ci sono molte altre cose che potrebbero essere il problema ed è impossibile dirlo senza ulteriori informazioni, ma è possibile risolverlo.
— Chris Morgan,
Fondamentalmente sto solo cercando di mantenere il testo inviato per rimanere all'interno di una larghezza e non allungare la tabella dopo averlo scritto
— Doc Holiday
Questo potrebbe aiutare stackoverflow.com/a/26560829/1924979
— Harsh Vakharia

Risposte:

292

Utilizzare table-layout:fixednella tabella e word-wrap:break-wordnella td.

Vedi questo esempio:

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

— jim31415
fonte
Dovresti aggiungere il border-collapse: collapse bit nella parte superiore della tua risposta in modo che le persone che eseguono la scansione visiva della tua risposta possano ottenere rapidamente la risposta completa.
— dwoodwardgb,
per qualche altra modifica tabella {border-collapse: collapse; table-layout: fixed; parola a capo: break-word;} table td {larghezza: 100px; word-wrap: break-word;}
— Kuldeep Kumar il
44

Funziona per me.

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

}

E l'attributo table è:

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

— Lavekush Agrawal
fonte
15 
td {
overflow: hidden;
max-width: 400px;
word-wrap: break-word;
}
— Jafstar
fonte
6
forse puoi spiegare il codice in modo che sia chiaro per chiunque
— Federico
mostra una tabella ordinata, ma il contenuto viene tagliato; vale a dire. non riesco a vedere alcune parole se il suo grande contenuto. overflow:hidden
— wpcoder
La codifica hard della larghezza massima non è buona però. Non si ridimensionerà anche a risoluzioni di grandi dimensioni, ecc. È necessario consentire alla tabella di rispondere correttamente alle dimensioni.
— user959690
4

Se stai utilizzando la tabella reattiva Bootstrap, vuoi solo impostare la larghezza massima per una colonna particolare ed eseguire il wrapping del testo, rendendo anche lo stile di questa colonna come segue

max-width:someValue;
word-wrap:break-word
— Feng Han
fonte
5
Si noti che max-widthdeve essere un pxvalore, non%
— maxedison
3

Questo ha funzionato per me quando avevo bisogno di visualizzare JSON "carina" in una cella:

td { white-space:pre }

Maggiori informazioni sulla white-spaceproprietà :

  • normal : Questo valore indica agli interpreti di comprimere le sequenze di spazi bianchi e di spezzare le linee se necessario per riempire le caselle.

  • pre: Questo valore impedisce agli interpreti di comprimere sequenze di spazi bianchi.
    Le linee vengono interrotte solo ai caratteri di nuova riga conservati.

  • nowrap: Questo valore comprime lo spazio bianco come per normal, ma elimina le interruzioni di riga all'interno del testo.

  • pre-wrap: Questo valore impedisce agli interpreti di comprimere sequenze di spazi bianchi.
    Le linee sono spezzate nei caratteri di nuova riga conservati e, se necessario, per riempire le caselle di linea.

  • pre-line: Questo valore indica agli interpreti di comprimere sequenze di spazi bianchi.
    Le linee sono spezzate nei caratteri di nuova riga conservati e, se necessario, per riempire le caselle di linea.

(Vedi anche altro alla fonte .)

— ashleedawg
fonte
0

Se si desidera correggere la colonna, è necessario impostare la larghezza. Per esempio:

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

— Eugene
fonte
1
Ho provato che ... continua ad espandere la tabella per qualche motivo <td id = "commenti - $ {commenti.id}" class = "wrappable" style = "larghezza: 100px"> $ {commenti.comment} </ td >
— Doc Holiday
0

Questo è un altro modo di affrontare il problema se si hanno stringhe lunghe (come i nomi dei percorsi dei file) e si desidera spezzare le stringhe solo su alcuni caratteri (come le barre). È possibile inserire caratteri Unicode Zero Width Space appena prima (o dopo) delle barre nell'HTML.

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

Ho testato con i dati binari e funziona perfettamente qui.

— jaip
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.