继承人整个页面*可以在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和表格的宽度?
在表格中使用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-layout: fixed;
width: 100%
}
td {
overflow: hidden;
max-width: 400px;
word-wrap: break-word;
}
如果您正在使用Bootstrap响应表,只想设置一个特定列的最大宽度并进行文本换行,使得此列的样式如下也有效
max-width:someValue;
word-wrap:break-word
当我需要在单元格中显示“漂亮”的JSON时,这对我有用:
td { white-space:pre }
white-space
property的更多信息:
normal
:此值指示用户代理折叠空白序列,并根据需要断行以填充行框。pre
:此值可防止用户代理折叠空白序列。 仅在保留的换行符处断行。nowrap
:这个值会像normal
一样折叠白色空间,但会抑制文本中的换行符。pre-wrap
:此值可防止用户代理折叠空白序列。 在保留的换行符处打破行,并根据需要填充行框。pre-line
:此值指示用户代理折叠空白序列。 在保留的换行符处打破行,并根据需要填充行框。
(另外,请参阅source的更多内容。)
如果要修复列,则应设置宽度。例如:
<td style="width:100px;">some data</td>
如果您有长字符串(如文件路径名)并且您只想打破某些字符(如斜杠)的字符串,这是解决问题的另一种方法。您可以在HTML中的斜杠之前(或之后)插入Unicode Zero Width Space字符。
.wrappable {
overflow: hidden;
max-width: 400px;
word-wrap: break-word;
}
我已经测试了二进制数据,它在这里工作得很好。
只需添加:word-break: break-word;
到您的表类。