Question

我有一个绑定到相当狭窄的盒子的链接列表;足够窄，可以包裹一些链接。

行高设置为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

我会这样做this way

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

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

或者您可以设置“{3}}

中的”第一行“伪元素

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

CSS覆盖自动换行的行高

2 个答案: