时间戳

首页 > 解决方案 > 如何在没有的情况下打破长句

html - 如何在没有的情况下打破长句

问题描述

我有一张如下表。

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

表格将被放大，我怎样才能打破不包含 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>

标签： html

解决方案

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

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

MDN - 断字

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>

推荐阅读