Question

继承整个页面 * 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="../images/icon_add.gif" border="0" alt="Add"/></a>
                        </td>

                    </tr>
            </c:if>

        </table>

    </ctl:vertScroll>
</form>

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

Answer 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>

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

Answer 3

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

Answer 4

如果您使用的是Bootstrap响应表，只想设置一个特定列的最大宽度并进行文本换行，使得此列的样式如下所示

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

Answer 5

我解决了它在我的“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;
}

Answer 6

如果要修复列，则应设置宽度。例如：

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

Answer 7

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

我已经使用二进制数据进行了测试，并且在这里完美运行。

Answer 8

如果您有长字符串（如文件路径名）并且您只想打破某些字符（如斜杠）的字符串，这是解决问题的另一种方法。您可以在HTML中的斜杠之前（或之后）插入Unicode Zero Width Space个字符。

Answer 9

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

<DataGrid
    ItemsSource="{Binding ProjectRoles}"
    AutoGenerateColumns="False"
    >
    <DataGrid.Columns>
        <DataGridTextColumn Binding="{Binding Role}" />
        <DataGridTextColumn Binding="{Binding Employee}" />
        <DataGridTemplateColumn>
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <ComboBox
                        ItemsSource="{Binding OtherEmployees}"
                        SelectedItem="{Binding SelectedOtherEmployee, UpdateSourceTrigger=PropertyChanged}"
                        />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>

有关`white-space` property的更多信息：

SelectedOtherEmployee：此值指导用户代理折叠空白序列，并在必要时中断行以填充行框。



td { white-space:pre }：此值防止用户代理折叠空白序列。
    行仅在保留的换行符处断开。



normal：该值与pre一样折叠空白，但抑制了文本内的换行符。



nowrap：此值防止用户代理折叠空白序列。
    行在保留的换行符处断开，并在必要时填充行框。



normal：此值指导用户代理折叠空白序列。
    行在保留的换行符处断开，并在必要时填充行框。

（另外，请参见source。）

Answer 10

只需在表类中添加word-break: break-word;。

Answer 11

如果你想将数据包装在 td 中，那么你可以使用下面的代码

td{
    width:60%;
    word-break: break-word;
    }

如何强制表格单元格内容包装？

11 个答案:

样本：

有关`white-space` property的更多信息：

如何强制表格单元格内容包装？

11 个答案:

样本：

有关white-space property的更多信息：

有关`white-space` property的更多信息：