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

Il s'agit d'une autre façon d'aborder le problème si vous avez de longues chaînes de caractères (comme les noms des chemins d'accès aux fichiers) et que vous ne voulez les rompre que sur certains caractères (comme les barres obliques). Vous pouvez insérer Espace de largeur nulle Unicode juste avant (ou après) les barres obliques dans le code HTML.