如何在没有拉伸的情况下强行在CSS中强制行高? [英] How to strongly force line-height in css, with no stretches?

问题描述

如何在CSS中强制行高，以使大字母不会拉伸行高.相反，他们应该剪辑在上面的线下，甚至与上面的线合并.

How can I force line height in CSS, in such way that no big letters will stretch the line height. Instead, they should clip under the above line, or even merge with the above line.

CSS line-height 的工作方式类似于MS Word的至少"行高选项.我想使其像MS Word的完全"选项一样工作.

CSS line-height seems to work like MS Word’s "at least" line height option by default. I want to make it work like MS Word’s "exactly" option.

例如:

• http://jsfiddle.net/DUpgN/

在那里，行的高度不同，因为其中一行包含一些较大的字母.我希望所有行的高度都一样.

There, the lines aren't the same height, because one line has some bigger letters in it. I want all lines to be the same height regardless.

推荐答案

字形(字符的视觉表示)居中内联框内垂直放置.如果行高大于内容高度，一半的差被添加为空格在顶部;相同的金额也会添加到底部.

Glyphs (the visual representations of a character) are centered vertically within an inline box. If the line height is larger than the content height, half the difference is added as space at the top; the same amount is also added at the bottom.

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

That's the case for the main, non bold, text in your example.

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

When set on a non-replaced inline element, it specifies the height used to calculate the height of the surrounding line box.

因此，在粗体文本中，字体大小仍在上方 8.5像素，这会引起问题.

So in the bold text, you'll still have 8.5px above the font-size, which causes the issue.

您可以通过将行高设置为小于字体大小 来防止这种情况(检查此演示).因为它是一个内联元素，并且没有 overflow:hidden; ，它仍然可以很好地看到，但是不会在文本的其余行高上添加任何像素.

You can prevent it by setting a line-height smaller than the font-size ( check this demo ). As it's an inline element, and there's no overflow:hidden; it will still be enterely visible, but it won't add any pixel to the rest of the text's line height.

据我所知，除非您使用某些CSS3属性(例如 transform:scale(value)等)，否则不可能拉伸"字母，

As far as i know, it's not possible to "stretch" the letters, unless you use some CSS3 properties like transform:scale(value) etc.

参考

代码:

<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; 
}​

这篇关于如何在没有拉伸的情况下强行在CSS中强制行高?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！