消除文本行之间的差距

当您增加元素的行高时，您将开始在每行文本之间获得空白。大多数时候这很好，因为你没有看到具体的差距。消除文本行之间的差距

但是，当您有一个窄列，并且链接运行多行时，它会出现问题。如果将鼠标移动到链接上，则线条之间会有一个小间隙，这会使链接悬停效果闪烁。

从设计/可用性的角度来看，我觉得这会导致糟糕的用户体验（没有人喜欢随机闪烁）。这种尝试：

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est. Nunc aliquam, eros a aliquam consequat, ante diam rutrum risus, et dignissim ligula turpis et ante. Maecenas leo neque, euismod in, aliquam et, molestie ac, ligula. Integer venenatis. Pellentesque enim. Maecenas aliquet, tortor at molestie sodales, urna velit pulvinar lorem, ac malesuada nibh turpis eu tortor.

我一些填充添加到链接防止这种现象发生在某些情况下，但是当文本较大它不工作;我需要更多的填充。任何人有解决方案的想法？

来源

2009-04-10 DisgruntledGoat

你究竟是什么意思，“但它不起作用，当文字较大，我需要更多的填充”？你能提供一个例子吗？不使用相对单位的填充修复？ – mercator 2009-04-11 00:17:37

你或许可以用上面的链接（现在已修复）使用Firebug来尝试它。如果您为链接添加背景，则会看到差距。现在增加填充，差距消失。现在增加字体大小，差距再次出现。所以填充有时会起作用，但不可靠。 – DisgruntledGoat 2009-04-12 00:16:19

尝试通过在该窄列中为您的<a>元素设置display：block来解决闪烁问题。

来源

2009-04-10 21:27:18

不是一个可怕的解决方案。这种情况下的问题在于，当鼠标位于“生成框”中时，悬停效果出现，但实际上并不在链接上（即，在该行的右侧）。 – DisgruntledGoat 2009-04-10 23:19:23

如果你知道每一行的起点和终点，你可以把一个跨度圆每一行，并把它变成一个内联块

#wrap {font-size:14px; line-height:16px;} 
a span{display:-moz-inline-block; display:inline-block;line-height:14px;padding:1px 0;} 
a:hover {background:red;} 

<div id="wrap"> 
dsvlaksvh; asvj asdfh;dhldv hd d dl h dfhd d dfh; daljfda k;d <a href="#" > 
<span>hdv </span><span>dvh ldvhldf dhk </span><span>;dhkdf hdl hdfk 
</span><span>dfhkldf h vkhg j</span></a> glj gj f gjl fjl fj f 
    </div>

来源

2009-04-11 00:22:40 wheresrhys

使用相对单位设置填充。

添加padding: 0.2ex 0; background: red;使用萤火虫/蜻蜓在问题中的示例链接对我来说很好，无论字体大小（通过CSS或放大设置）。

在Firefox中改变字体大小的唯一问题是背景开始重叠前一行;但这是一个line-height问题。

来源

2009-04-14 12:00:02 mercator

消除文本行之间的差距

回答

相关问题