Question

任何人都可以帮我请桌子td溢出盒子，请修理它。

**https://jsfiddle.net/Baloch007/njvLxzrp/**

Answer 1

这是因为单词之间没有空格，默认情况下单个单词总是会出现在一行中。

如果您想根据表格单元格宽度中断工作，请使用word-break:break-all; css

.device-information td {
  float: left;
   border:solid 1px #cecece;
   height:35px;
  width: 100%;
  word-break:break-all;
}

示例：https://jsfiddle.net/njvLxzrp/1/

但如果你在全表中应用这个css，这可能会产生问题，所以我建议你给那个单元格上课，然后像这样应用css

<强> HTML

<table class="device-information">
    <tbody>
        <tr>
            <th>Device Name</th>
            <td class="longWord">alfalahhajshfjdhfjahdjfhdjhfjdhfjdhfjdhfjhdfjasfdfasdfdsafdasf</td>
            <td>alfalah</td>
            <td>alfalah</td>
            <td>alfalah</td>
            <td>alfalah</td>
            <td>alfalah</td> 
        </tr>
    </tbody>
</table>

<强> CSS

.device-information td.longWord {
   word-break:break-all;
}

Answer 2

如果你不介意不显示整行文字而只是表明还有更多文字，你可以添加这些行

white-space:no-wrap;
overflow:hidden;
text-overflow:ellipsis;

到第28行的.device-information td

https://jsfiddle.net/vhnrn72z/

Answer 3

＆＃13;

.device-information td {
  float: left;
  border:solid 1px #cecece;
  min-height:35px;
  width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;
    -ms-word-break: break-all;

}

＆＃13;

min-height：35px确保每个td保持至少35px的最小高度。

overflow-wrap：break-word;和自动换行：break-word;字面上只是彼此的替代名称。有些浏览器不支持另一种浏览器。

单词分解：break-all用于要求CJK（中文，日文和韩文）文本的特定行为，而自动换行：break-word是更通用的所以，我的建议是，使用其中的3个。

表数据溢出框

3 个答案: