css - 如何在css中强烈强制行高，没有延伸？

Question

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

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

例如：

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

score 8 · Accepted Answer

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

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

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

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

您可以通过设置小于字体大小的 line-height 来防止它（查看此演示）。因为它是一个内联元素，所以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; 
}

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

0

也许添加

display:inline-block;
height:13px;

到 b 标签

于 2012-09-28T15:10:53.723 回答

score -1 · Accepted Answer

-1

没门。您可以考虑放大行高，例如 30px，您将获得所有行的相同高度。

于 2012-09-28T15:01:29.373 回答

4 回答 4