CSS覆盖自动换行的行高

Question

我有一个绑定到一个相当狭窄的盒子的链接列表; 足够狭窄的一些链接包装.

line-height设置为30px,适用于非包装链接; 但是,对于文本足够长以强制换行的链接,也会在其中应用30px行高,从而使其看起来好像有2个链接而不仅仅是链接文本的延续.

我想以某种方式(没有js或在中间件上结束计算字符串长度)来使包装的链接文本具有10px左右的行高,以给出连续而不是分离的视觉印象.

Answer 1

Line-height应该设置线之间的间距(特别是当它们换行时).什么,你可能寻找的是margin在上li对象.如果您将line-height线条换行时设置为所需的较小值,并将其设置margin为项目之间所需的值,那么您应该很高兴.

看看这是否符合您的要求:

li {
    padding: 10px 0 0 0;
    margin: 30px 0;
    line-height: 10px;
}

Answer 2

我会做这样

li {
    list-style-position: inside;
    margin: 20px;
}

ul {
    width: 200px;
    border: solid 1px;
}

​

或者您可以像此示例中那样设置"第一行"伪元素

li {
   padding: 10px 0 0 0;
    margin: 10px;
    line-height: 30px;
}
li:first-line {
    margin: 10px;
    line-height: 10px;
}
ul {
    width: 200px;
}