如何强制table cell <td>内容包装?

inheritance人整个页面* 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="..http://img.dovov.comicon_add.gif" border="0" alt="Add"/></a> </td> </tr> </c:if> </table> </ctl:vertScroll> </form> 

每次提交时都会延伸。
此页面也在一个div内。 我是否需要设置div和表格的宽度?

使用table-layout:fixed在表格和word-wrap:break-word 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> 

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> 

它的作品给我。

 <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 

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

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

.wrappable {overflow:hidden; max-width:400px; 单词包装:分词; }

我已经testing了二进制数据,在这里完美的工作。

这是解决问题的另一种方法,如果你有很长的string(比如文件path名),而你只想打破某些字符(比如斜线)上的string。 您可以在HTML的斜杠之前(或之后)插入Unicode零宽度空格字符。