Question

我有一个类似以下的表格。

当我向“ 1111111111111111111111”中添加更多文本时

表格将被放大，我该如何打破不包含br或空格的文本？

<table style="width:280px">
            <tr align="left" valign="top" style="font-size: 14px;">
                <th align="left" style="width:100px;white-space: normal;">LEE, WING WING wrote:</th>
                <th style="width:20px"></th>
                <th align="left" style="width:100px;white-space: nowrap;">15-Sep-2019 12:08</th>
            </tr>
            <tr align="left" valign="top">
                <th colspan="3" style="white-space: pre-wrap; word-wrap: break-word;width:100px">1111111111111111111111111111111111111111111111111111111111</th>
            </tr>
        </table>

Answer 1

您应该尝试使用CSS word-break属性。

断行CSS属性设置是否在文本溢出其内容框的地方出现换行符。

MDN - word-break

table tr th {
  word-break: break-word;
}

下面是一个有效的示例。我可以随意将您的嵌入样式移动到单独的CSS样式表中，但是可以随时随地编写您的样式。

table {
  width: 280px;
}

table tr {
  font-size: 14px;
}

table th {
  border: dotted 1px red;
  width: 100px;
  white-space: normal;
}

table th:last-child {
  white-space: nowrap;
}

table tr:last-child th {
  white-space: pre-wrap;
  word-break: break-word;
}

<table>
  <tr align="left" valign="top">
    <th align="left">LEE, WING WING wrote:</th>
    <th style="width:20px"></th>
    <th align="left">15-Sep-2019 12:08</th>
  </tr>
  <tr align="left" valign="top">
    <th colspan="3">
      1111111111111111111111111111111111111111111111111111111111
    </th>
  </tr>
</table>

Answer 2

尝试一下：

<table style="width:280px">
        <tr align="left" valign="top" style="font-size: 14px;">
            <th align="left" style="width:100px;white-space: normal;">LEE, WING WING wrote:</th>
            <th style="width:20px"></th>
            <th align="left" style="width:100px;white-space: nowrap;">15-Sep-2019 12:08</th>
        </tr>
        <tr align="left" valign="top">
            <th colspan="3" style="white-space: pre-wrap; word-break: break-all; width:100px">1111111111111111111111111111111111111111111111111111111111</th>
        </tr>
    </table>

Answer 3

在表格中使用table-layout:fixed，在td中使用word-wrap:break-word。

演示：

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>

如何在没有<br>

3 个答案:

演示：