如何强制强制css中的行高,没有延伸？

Question

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

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

例如:

• http://jsfiddle.net/DUpgN/

在那里,线条的高度不同,因为一条线条中有一些更大的字母.我希望所有的线都是相同的高度,无论如何.

Answer 1

字形(字符的可视表示)在内联框中垂直居中.如果线条高度大于内容高度,则将差值的一半作为顶部空间添加; 同样的数量也在底部添加.

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

在未替换的内联元素上设置时,它指定用于计算周围线框高度的高度.

因此,在粗体文本中,您仍然会比字体大小高出8.5px ,这会导致问题.

您可以通过将行高设置为小于 font-size 来阻止它(请查看此演示).因为它是一个内联元素,并且没有overflow:hidden;它仍然是完全可见的,但它不会在文本行高的其余部分添加任何像素.

据我所知,除非你使用像CSS3这样的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; 
}?