如何强制表格单元格 <td> 内容换行？
Posted
技术标签:
【中文标题】如何强制表格单元格 <td> 内容换行？【英文标题】：How to force table cell <td> content to wrap? 【发布时间】：2011-10-03 17:42:01 【问题描述】：这是整个页面 * 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 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" /></a>
</td>
</tr>
</c:if>
</table>
</ctl:vertScroll>
</form>
每次提交时它都会延长。 此页面也在 div 中。是否还需要设置 div 和 table 的宽度？
【问题讨论】：
你在哪里定义wrappable？
.wrappable 类在哪里定义？你用的是什么浏览器？
使用的浏览器尤为重要——旧版IE不支持max-width。还有很多其他的事情可能是问题所在，如果没有更多信息就不可能说出来，但这是可以解决的。
我基本上只是想保持提交的文本保持在一个宽度内，而不是在我提交后拉伸表格
这可能有助于***.com/a/26560829/1924979
【参考方案1】：
在表格中使用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>
【讨论】：
您应该在答案的顶部添加border-collapse:collapse 位，以便目视扫描您的答案的人可以快速获得完整的答案。 对表格进行更多修改 border-collapse:collapse;表格布局：固定；自动换行：断字； 表格 td 宽度：100px； word-wrap:break-word;【参考方案2】：它对我有用。
<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-layout: fixed;
width: 100%
【讨论】：
【参考方案3】：td
overflow: hidden;
max-width: 400px;
word-wrap: break-word;
【讨论】：
也许您可以解释一下代码，以便任何人都清楚 显示整齐的表格，但内容被剪切； IE。如果它的内容很大，看不到一些单词。overflow:hidden
硬编码最大宽度并不好。它不能很好地扩展到大分辨率等。你想让表格正确响应大小。【参考方案4】：
当我需要在单元格中显示“漂亮”的 JSON 时，这对我有用：
td white-space:pre
更多关于white-space property:
normal：该值指示用户代理折叠空白序列，并根据需要换行以填充行框。
pre：此值可防止用户代理折叠空白序列。 仅在保留的换行符处换行。
nowrap：此值折叠空格，就像normal一样，但抑制文本中的换行符。
pre-wrap：此值可防止用户代理折叠空白序列。 在保留的换行符处换行，并根据需要填充行框。
pre-line：该值指示用户代理折叠空白序列。 在保留的换行符处换行，并根据需要填充行框。
（另外，请参阅source。）
【讨论】：
【参考方案5】：如果您使用的是 Bootstrap 响应式表格，只想为特定列设置最大宽度并进行文本换行，使该列的样式如下所示也可以
max-width:someValue;
word-wrap:break-word
【讨论】：
注意max-width必须是px值，而不是%【参考方案6】：
只需添加：word-break: break-word; 到你的表类。
【讨论】：
【参考方案7】：我解决了它在我的“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;
【讨论】：
【参考方案8】：如果你想修复列，你应该设置宽度。例如：
<td style="width:100px;">some data</td>
【讨论】：
我试过了......它出于某种原因不断扩大表格如果您有长字符串（例如文件路径名）并且您只想在某些字符（例如斜杠）上打断字符串，这是解决问题的另一种方法。您可以在 HTML 中的斜杠之前（或之后）插入 Unicode Zero Width Space 字符。
【讨论】：
【参考方案10】：.wrappable
overflow: hidden;
max-width: 400px;
word-wrap: break-word;
我已经用二进制数据进行了测试，它在这里工作得很好。
【讨论】：
【参考方案11】：如果你想将数据包装在 td 中，那么你可以使用下面的代码
td
width:60%;
word-break: break-word;
【讨论】：
以上是关于如何强制表格单元格 <td> 内容换行？的主要内容，如果未能解决你的问题，请参考以下文章