如何在 bootstrap table 中换行？

Question

使用bootstrap table 我们正在显示来自数据库的内容，通常这些数据的文本大小很大。所以对于所有 headers 我们已经给出了一些固定宽度，如下所示，

<th width="100px">Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text </>

示例环绕文字，

当文本大于分配的宽度时，它会以适当的对齐方式换行到下一行。但同样的逻辑不适用于 non-spaced 数字，如下所示，

<th width="100px">1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@</>

示例 Non-wrapping 个数字，

在上面的截图中，数字正好与下一列重叠。如何让它从固定宽度开始换行？

如有任何建议或帮助，我们将不胜感激。

Answer 1

您可以使用 word-wrap: break-word 来换行。

th {
  word-wrap: break-word;
  max-width: 100px;
}

th {
  word-wrap: break-word;
  max-width: 100px;
}

<table>
  <thead>
    <th>1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@1234567890@</th>
  </thead>
</table>

如何在 bootstrap table 中换行？

How to Wrap Numbers in bootstrap table?

css

jsp

bootstrap-modal

bootstrap-table