Comment forcer le contenu de la cellule de tableau <td> à s'enrouler ?

Question

Voici la page entière * wrappable est défini dans un fichier 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;
}                

Voici la page entière :

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

Ça s'étire à chaque fois que je soumets.
Cette page se trouve également dans un div. Dois-je également définir la largeur de la division et du tableau ?

Answer 1

Ajoute juste : word-break: break-word; à votre classe de table.

Answer 2

Je résous le problème en mettant une balise "p" à l'intérieur de ma balise "td" comme ceci :

<td><p class="">This is my loooooooong paragraph</p></td>

Ajoutez ensuite les propriétés suivantes à la classe, en utilisant la largeur maximale pour définir la largeur du champ que vous souhaitez obtenir

.p-wrap {
  max-width: 400px;
  word-wrap: break-word;
  white-space: pre-wrap;
  font-size: 12px;
}

Answer 3

Si vous voulez envelopper les données dans un td, vous pouvez utiliser le code ci-dessous

td{
    width:60%;
    word-break: break-word;
    }

Answer 4

Si vous voulez fixer la colonne, vous devez définir la largeur. Par exemple :

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

Answer 5

.wrappable { 
      overflow: hidden; 
      max-width: 400px; 
      word-wrap: break-word; 
}

J'ai testé avec les données binaires et cela fonctionne parfaitement ici.