CSS如何在单词换行时覆盖行高？

Question

我有一个链接列表，它们绑定在一个相当窄的框中；窄到足以使一些链接换行。

line-height设置为30px，对于未换行的链接来说很好；然而，对于一个文本足够长以强制换行的链接，也会应用30px的line-height，因此它看起来像是有2个链接而不仅仅是链接文本的延续。

我希望以某种方式（无需js或在中间件端计算字符串长度）使换行的链接文本具有大约10px的line-height，以给出连续而不是分离的视觉效果。

- virtualeyes

Answer 1

line-height属性用于设置行与行之间的间距（特别是在换行时），你可能想要的是在

对象上设置margin。如果你将line-height设置为所需的较小值以使得行在换行时更接近，同时将margin设置为所需的项之间的间距，那么就可以实现你的目标。

看看这是否符合你的需求：

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

- TLS

---

应该为这样的边缘情况解决方案获得更多赞，但只能将其标记为已回答1次。必须变得有点虚弱才能做到恰到好处，但这是“正确”的方法。有趣的是，当margin是更大的值时，line-height似乎完全被忽略了。 - virtualeyes

感谢接受！较小的“行高”被忽略，因为“margin”和“line-height”是“折叠”的值。 “line-height”值本质上在每一行上放置一个垂直边距。当两个具有垂直边距的对象相邻时，较小的边距将“折叠”为零，只留下较大的值。很抱歉，我没有这方面规范的链接。 - TLS

这里有一个网站，似乎相当好地解释了折叠边距的概念: 折叠边距。 - TLS

用户没有提到LI或UL，你为什么要谈论它呢？真正的问题是当一个单词换行时，它的间距与行高不同...我有什么遗漏吗？ - Francesco

@Francesco，你说得对，OP没有特别提到li、ul或ol元素。由于问题以“我有一组链接…”开头，我猜想它是使用ul和li元素完成的。虽然我回答中提供的CSS是针对li元素的，但它也可以应用于其他选择器。根据“被接受的答案”勾选标记和赞成票，似乎这些信息对很多人非常有用，尽管我假设li是元素。我的假设是否使我的答案无效？ - TLS

Answer 2

我会这样做：点这里。

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

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

或者您可以像这个例子中所示，设置“first-line”伪元素。

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

- thepriebe

---

很酷，但不行，无法更改默认的换行行高。理想情况下，换行文本应该出现在下方，并留有5像素的间距。我会继续调试... - virtualeyes

给你点赞，因为第一行选项很不错。我的CSS技能相对较弱，所以像这样的小贴士很有用；-) - virtualeyes