Como forçar a quebra de conteúdo da célula da tabela <td>?

146

Aqui a página inteira * wrappable é definida em um arquivo 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;
}

Aqui está a página inteira:

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

Ele se estende toda vez que eu envio.
Esta página também está dentro de uma div. Preciso definir a largura da div e da tabela também?

html  css  html-table 
— Doc Holiday
fonte
1
Onde você está definindo wrappable?
— canon
2
Onde a .wrappableclasse é definida? Qual navegador você está usando?
— 21711 Dani
O navegador usado é especialmente importante - as versões antigas do IE não suportam max-width. Há muitas outras coisas que poderiam ser o problema e é impossível dizer sem mais informações, mas é uma que pode ser quebrada.
— 31411 Chris Morgan
Im basicamente apenas tentando manter o texto submetido a estadia dentro de uma largura e não esticar a mesa depois que eu sybmit-lo
— Doc Holiday
— Harsh Vakharia

Respostas:

292

Use table-layout:fixedna tabela e word-wrap:break-wordno td.

Veja este exemplo:

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

— jim31415
fonte
Você deve adicionar o bit border-collapse: collapse na parte superior da sua resposta para que as pessoas que estão digitalizando visualmente sua resposta possam obter a resposta completa rapidamente.
— dwoodwardgb
para pouco mais tabela de modificações {border-collapse: collapse; layout da tabela: fixo; quebra de linha: quebra de palavra;} tabela td {width: 100px; quebra de palavra: quebra de palavra;}
— Kuldeep Kumar 13/03
44

Isso funciona para mim.

<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 o atributo da tabela é:

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

— Lavekush Agrawal
fonte
15 
td {
overflow: hidden;
max-width: 400px;
word-wrap: break-word;
}
— Jafstar
fonte
6
talvez você possa explicar o código, para que fique claro para qualquer um #
— Federico
mostra uma tabela organizada, mas o conteúdo é cortado; ie não consigo ver algumas palavras se tiver grande conteúdo. overflow:hidden
— Wpcoder #
Codificar a largura máxima não é bom. Também não será dimensionado para resoluções grandes, etc. Você deseja permitir que a tabela responda ao tamanho corretamente.
— user959690
4

Se você estiver usando a tabela responsiva do Bootstrap, só deseja definir a largura máxima para uma coluna específica e fazer a quebra automática de texto, tornando o estilo dessa coluna da seguinte maneira também funciona

max-width:someValue;
word-wrap:break-word
— Feng Han
fonte
5
Note que max-widthdeve ser um pxvalor, não%
— maxedison 9/16/16
3

Isso funcionou para mim quando eu precisei exibir JSON "bonito" em uma célula:

td { white-space:pre }

Mais sobre a white-spacepropriedade :

  • normal : Esse valor direciona os agentes do usuário a recolher seqüências de espaços em branco e interromper linhas conforme necessário para preencher caixas de linhas.

  • pre: Este valor evita que os agentes do usuário colapsem sequências de espaço em branco.
    As linhas são quebradas apenas em caracteres de nova linha preservados.

  • nowrap: Esse valor recolhe o espaço em branco normal, mas suprime as quebras de linha no texto.

  • pre-wrap: Este valor evita que os agentes do usuário colapsem sequências de espaço em branco.
    As linhas são quebradas nos caracteres de nova linha preservados e conforme necessário para preencher as caixas de linha.

  • pre-line: Esse valor direciona os agentes do usuário a recolher sequências de espaço em branco.
    As linhas são quebradas nos caracteres de nova linha preservados e conforme necessário para preencher as caixas de linha.

(Veja também mais na fonte .)

— ashleedawg
fonte
0

Se você deseja corrigir a coluna, defina a largura. Por exemplo:

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

— Eugene
fonte
1
Eu tentei isso ... ele continua expandindo a tabela por algum motivo <td id = "comments - $ {comments.id}" class = "wrappable" style = "width: 100px"> $ {comments.comment} </ td >
— Doc Holiday
0

Essa é outra maneira de solucionar o problema se você tiver longas seqüências de caracteres (como nomes de caminhos de arquivos) e desejar apenas quebrar as seqüências de caracteres em determinados caracteres (como barras). Você pode inserir caracteres Unicode Zero Width Space antes (ou depois) das barras no HTML.

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

Eu testei com os dados binários e está funcionando perfeitamente aqui.

— jaip
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.