如何强制表单元格<td>内容要包装?


146

这里是整个页面*可包装的内容在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和表格的宽度?


1
您在哪里定义wrappable
佳能

2
.wrappable类在哪里定义?你使用的是什么浏览器?
Dani

所使用的浏览器尤其重要-IE的旧版本不支持max-width。还有很多其他问题可能是问题,没有更多信息就很难说,但这是可以打破的。
克里斯·摩根

我基本上只是想使提交的文本保持在一定宽度内,而在我sybmit之后不拉伸表格
Doc Holiday

Answers:


292

使用table-layout:fixed该表,并word-wrap:break-word在TD。

请参阅以下示例:

<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位,以便直观地查看您答案的人们可以快速获得完整答案。
dwoodwardgb

对于更多的修改表{border-collapse:collapse; table-layout:fixed; word-wrap:break-word;} table td {width:100px; word-wrap:break-word;}
Kuldeep Kumar

44

它对我有用。

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


15
td {
overflow: hidden;
max-width: 400px;
word-wrap: break-word;
}

6
也许您可以解释代码,这样任何人都可以理解
Federico 2014年

它显示整洁的表,但内容被剪切掉;即。如果内容很大,就看不到任何文字。 overflow:hidden
wpcoder

硬编码最大宽度虽然不好。它不能很好地缩放到较大的分辨率等。您想让表格正确响应尺寸。
user959690

4

如果您使用的是Bootstrap响应表,则只想为一个特定的列设置最大宽度并进行文本换行,使该列的样式如下

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

5
请注意,max-widthpx值必须是一个值,而不是%
maxedison

3

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

td { white-space:pre }

有关该white-space物业的更多信息:

  • normal :此值指示用户代理折叠空白序列,并在必要时中断行以填充行框。

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

  • nowrap:此值像一样折叠空白normal,但抑制文本内的换行符。

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

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

(另外,请参阅源代码中的更多内容。)



0

如果要修复列,则应设置宽度。例如:

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


1
我尝试过...由于某种原因它一直在扩展表格<td id =“ comments-$ {comments.id}” class =“ wrappable” style =“ width:100px”> $ {comments.comment} </ td >
Doc Holiday

0

如果您有很长的字符串(例如文件路径名),而您只想将某些字符的字符串打断(例如斜杠),则这是解决问题的另一种方法。您可以在HTML中的斜杠之前(或之后)插入Unicode零宽度空格字符。


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

我已经用二进制数据对其进行了测试,并且在这里可以正常工作。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.