Html 如何强制表格单元格 <td> 内容换行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6666532/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to force table cell <td> content to wrap?
提问by Doc Holiday
Heres the entire page * wrappable is defined in a main.css file
整个页面 * 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;
}
Heres the entire page:
这是整个页面：
<%@ 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>
It just stretches every time I submit.
This page is within a div also. Do I need to set the width of the div and the table also?
每次我提交时它都会延伸。
该页面也在一个 div 中。我是否还需要设置 div 和表格的宽度？
回答by jim31415
Use table-layout:fixedin the table and word-wrap:break-wordin the td.
使用table-layout:fixed该表，并word-wrap:break-word在TD。
See this example:
看这个例子：
<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>
回答by Lavekush Agrawal
Its works for me.
它对我有用。
<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;
}
And table attribute is:
表属性是：
table {
table-layout: fixed;
width: 100%
}
回答by Jafstar
td {
overflow: hidden;
max-width: 400px;
word-wrap: break-word;
}
回答by Feng Han
If you are using Bootstrap responsive table, just want to set the maximum width for one particular column and make text wrapping, making the the style of this column as following also works
如果您使用的是 Bootstrap 响应式表格，只想设置特定列的最大宽度并进行文本换行，使该列的样式如下也有效
max-width:someValue;
word-wrap:break-word
回答by ashleedawg
This worked for me when I needed to display "pretty" JSON in a cell:
当我需要在单元格中显示“漂亮”的 JSON 时，这对我有用：
td { white-space:pre }
More about the white-spaceproperty:
有关该white-space物业的更多信息：
normal: This value directs user agents to collapse sequences of white space, and break lines as necessary to fill line boxes.
pre: This value prevents user agents from collapsing sequences of white space.
Lines are only broken at preserved newline characters.
nowrap: This value collapses white space as fornormal, but suppresses line breaks within text.
pre-wrap: This value prevents user agents from collapsing sequences of white space.
Lines are broken at preserved newline characters, and as necessary to fill line boxes.
pre-line: This value directs user agents to collapse sequences of white space.
Lines are broken at preserved newline characters, and as necessary to fill line boxes.
normal：该值指示用户代理折叠空白序列，并根据需要中断行以填充行框。
pre：此值可防止用户代理折叠空白序列。
仅在保留的换行符处断行。
nowrap：此值会像 一样折叠空白normal，但会抑制文本中的换行符。
pre-wrap：此值可防止用户代理折叠空白序列。
在保留的换行符处断行，并根据需要填充行框。
pre-line：该值指示用户代理折叠空白序列。
在保留的换行符处断行，并根据需要填充行框。
(Also, see more at the source.)
（另外，请参阅源代码。）
回答by Sajjad Aljileezi
Just add: word-break: break-word;to you table class.
只需添加： word-break: break-word;到您的表类。
回答by Eugene
If you want fix the column you should set width. For example:
如果要修复列，则应设置宽度。例如：
<td style="width:100px;">some data</td>
<td style="width:100px;">some data</td>
回答by jaip
.wrappable {
overflow: hidden;
max-width: 400px;
word-wrap: break-word;
}
I have tested with the binary data and its working perfectly here.
我已经用二进制数据进行了测试，它在这里工作得很好。
回答by Mark Lakata
This is another way of tackling the problem if you have long strings (like file path names) and you only want to break the strings on certain characters (like slashes). You can insert Unicode Zero Width Spacecharacters just before (or after) the slashes in the HTML.
如果您有长字符串（如文件路径名）并且您只想在某些字符（如斜杠）上断开字符串，这是另一种解决问题的方法。您可以在 HTML 中的斜杠之前（或之后）插入Unicode 零宽度空格字符。
