如何在 css 中强行强制行高，没有拉伸？答案

【问题标题】：How to strongly force line-height in css, with no stretches?如何在 css 中强行强制行高，没有拉伸？
【发布时间】：2018-08-29 12:47:39
【问题描述】：

如何在 CSS 中强制行高，这样大的字母就不会拉伸行高。相反，它们应该剪辑在上面的行之下，甚至与上面的行合并。

默认情况下，CSS line-height 似乎像 MS Word 的“至少”行高选项一样工作。我想让它像 MS Word 的“完全”选项一样工作。

例如：

在那里，行的高度不同，因为其中一行有一些更大的字母。无论如何，我希望所有线条的高度相同。

【问题讨论】：

标签： css

【解决方案1】：

字形（字符的视觉表示）居中垂直在内联框中。如果行高大于内容高度，差值的一半添加为空格在顶部;底部也添加了相同的数量。

您的示例中的主要非粗体文本就是这种情况。

在不可替换的内联元素上设置时，它指定高度用于计算周围线框的高度。

因此，在粗体文本中，您仍然会有 8.5px 高于字体大小，这会导致问题。

您可以通过设置小于字体大小 (check this demo) 的 line-height smaller 来阻止它。因为它是一个内联元素，并且没有overflow:hidden;，所以它仍然是可见的，但它不会在文本的其余行高上添加任何像素。

据我所知，不可能“拉伸”字母，除非您使用一些 CSS3 属性，例如 transform:scale(value) 等。

代码：

<p>ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac <b>ac</b>
ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac</p>

CSS：

p {
    line-height:17px;        
    font-size:15px;
    width:150px;
}
b {
    font-size:25px;
    line-height:1px; 
}

【讨论】：

虽然如果b 变得太大，这将不起作用，例如jsfiddle.net/mM4tR/3（虽然我不太明白为什么。）
@PaulD.Waite 因为您的示例中的b 高50px（其余文本：15+17 = 32px）。在这种情况下，您可以添加display:inline-block;，但它会覆盖底部文本（jsfiddle.net/gionaf/3rQjt），我认为这不是 OP 想要的......
明白了，这有助于使其更易于理解。

【解决方案2】：

不确定这是否是您所追求的，但这会剪切任何大于行高的文本。

b {
    display:inline-block;
    overflow:hidden;
    vertical-align:top;
   }

【讨论】：

【解决方案3】：

可能会添加

display:inline-block;
height:13px;

到b标签

【讨论】：

【解决方案4】：

没办法。你可以考虑把行高放大，比如30px，你会得到所有行的高度一样。

【讨论】：