CSS 覆盖自动换行时的行高
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9670383/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS override line-height on word wrap
提问by virtualeyes
I have a list of links bound to a fairly narrow box; narrow enough for some links to wrap.
我有一个绑定到一个相当窄框的链接列表；窄到足以包裹一些链接。
line-height is set to 30px, which is fine for the non-wrapped links; however, for a link whose text is long enough to force a line wrap, a 30px line-height is applied there as well, thus making it appear as if there are 2 links and not just a continuation of link text.
line-height 设置为 30px，这对于非包裹的链接来说很好；但是，对于文本足够长以强制换行的链接，也会在此处应用 30 像素的行高，从而使其看起来好像有 2 个链接，而不仅仅是链接文本的延续。
I'd like somehow (without js or on middleware end calc'ing string length) to get the wrapped link text to have a line-height of 10px or so to give visual impression of continuation and not separation.
我想以某种方式（没有 js 或在中间件端计算字符串长度）让包装的链接文本具有 10px 左右的行高，以提供连续而不是分离的视觉印象。
回答by TLS
Line-heightis supposed to set the spacing between lines (particularly, when they wrap). What you're probably looking for is marginon the liobject. If you set the line-heightto the smaller value that you want when the lines wrap and set the marginto the value that you want in between the items, you should be good to go.
Line-height应该设置行之间的间距（特别是当它们换行时）。您可能正在寻找的是对象margin上的内容li。如果您在line-height换行时将设置为所需的较小值，并将 设置margin为项目之间所需的值，那么您应该很高兴。
See if this does what you want:
看看这是否符合您的要求：
li {
padding: 10px 0 0 0;
margin: 30px 0;
line-height: 10px;
}
回答by thepriebe
I would do it this way
我会做这样
li {
list-style-position: inside;
margin: 20px;
}
ul {
width: 200px;
border: solid 1px;
}
?
?
Or you could set the "first-line" pseudo element like in this example
或者你可以像在这个例子中一样设置“第一行”伪元素
li {
padding: 10px 0 0 0;
margin: 10px;
line-height: 30px;
}
li:first-line {
margin: 10px;
line-height: 10px;
}
ul {
width: 200px;
}
