如何强制表单元格 < td > 内容换行？

这是整页 * wrappable 在 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;
}

整个页面如下:

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

只是每次我提交的时候都会拉长。
这个页面也在一个 div 中。是否还需要设置 div 和表的宽度？

526894 次浏览
小开

如果你想修复列，你应该设置宽度。例如:

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

小开
最佳答案

在表中使用 table-layout:fixed，在 td 中使用 word-wrap:break-word。

看这个例子:

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

演示:

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>

小开

对我有用。

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


}

Table 属性是:

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

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

我已经测试了二进制数据，它在这里完美工作。

小开

如果您有很长的字符串(比如文件路径名) ，并且只希望在特定字符(比如斜杠)上中断字符串，那么这是解决这个问题的另一种方法。可以在 HTML 中的斜杠之前(或之后)插入 Unicode 零宽度空间字符。

小开

如果使用 Bootstrap 响应表，只需要设置一个特定列的最大宽度并进行文本换行，使得此列的样式如下所示也可以工作

max-width:someValue;
word-wrap:break-word
小开

当我需要在单元格中显示“漂亮的”JSON 时，这对我很有用:

td { white-space:pre }

更多关于 white-space财产的资料:

  • normal: 该值指示用户代理折叠空白序列，并根据需要中断行以填充线框。

  • pre: 此值防止用户代理折叠空白序列。
    行只在保留的换行符处断开。

  • nowrap: 该值与 normal一样折叠空白，但是抑制文本中的换行。

  • pre-wrap: 此值防止用户代理折叠空白序列。
    行在保留的换行符处被折断，并在必要时填充行框。

  • pre-line: 此值指示用户代理折叠空白序列。
    行在保留的换行符处被折断，并在必要时填充行框。

(详情请参阅 来源。)

小开

只需添加: word-break: break-word;到您的表类。

小开

我解决了这个问题，在我的“ td”标签中放入一个“ p”标签，如下所示:

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

然后将此属性添加到类中，使用 max-width 来定义字段的宽度

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

如果希望将数据包装在 td 中，那么可以使用下面的代码

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

提交答案