设置行高并允许断字

Posted 2023-03-05

【中文标题】设置行高并允许断字

【英文标题】：Setting line-height and allowing break-word

【发布时间】：2022-01-17 23:24:53

【问题描述】：

我在这里应该有一个非常简单的问题。我有一张表格，想将每个单元格的行高设置为 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%;
 

【问题讨论】：

你能不能试试 line-height only height: 8%

【参考方案1】：

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

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

另外，我将仅将其应用于td，将margin 仅应用于table。如果您需要单元格内的空间，请在这些单元格上使用padding。

【讨论】：

谢谢！这有帮助！我认为分离 td/table 解决了我的问题。