设置行高和允许分词

Question

我这里应该有一个很简单的问题。我有一个 table 并想将每个单元格的行高设置为 8%。我也启用了中断词。如果页面宽度减小，文本就会重叠（因为我明确设置了行高）。查看代码实现：

table, th, td {
  font-size: 12px;
  font-weight: 450;
  word-break: break-word;
  line-height: 8%;
  margin-bottom: 8%;
}

示例：

如您所见，文字重叠。虽然我想明确指定行高，但我也希望在文本移动到两行时单元格增大。正如您在 css 文件中看到的那样，我尝试使用 margin-bottom 但没有成功。任何建议表示赞赏。提前致谢！

这解决了我的问题：

 tr, th, td {
   font-weight: 450;
   font-size: 11px;
   word-break: break-word;
   line-height: 90%;
 }

Answer 1

line-height: 8%; 表示该元素 字体大小 的 8%，这就是导致所描述的重叠的原因。

尝试使用“110%”或“1.1”（等于 110%）等值，并尝试根据需要在浏览器工具中调整该值，直到找到符合您预期的值。

此外，我只将其应用于 td，而 margin 仅应用于 table。如果您需要在单元格内使用 space，请在这些单元格上使用 padding。

Setting line-height and allowing break-word