Устранить разрыв между строками текста

Question

Когда вы увеличиваете высоту строки элемента, вы начинаете получать пробелы между каждой строкой текста. В большинстве случаев это нормально, так как вы не видите конкретного разрыва.

Но это проблематично, когда у вас есть узкий столбец со ссылкой, которая проходит через несколько строк. Если навести указатель мыши на ссылку, между строками появится небольшой зазор, в результате чего эффект наведения ссылки будет мигать.

С точки зрения дизайна / юзабилити, я чувствую, что это плохо для пользователя (никто не любит случайное мигание). Попробуйте это с этим:

Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. В Est. Nunc Аликвам, Эрос Аликвам Конкват, Ante Diam Rutrum Risus, и Dignissim Ligula Turpis и анте. Maecenas leo neque, euismod in, aliquam et, molestie ac, ligula. Целое вененатис. Pellentesque enim. Maecenas aliquet, мучитель в моли содеалес, урна велит пульвинар лорем, ac malesuada nibh turpis eu tortor.

Я могу добавить к ссылкам некоторые отступы, чтобы в некоторых случаях этого не происходило, но это не работает, когда текст больше; Мне нужно больше набивки. У кого-нибудь есть идеи для решения?

Answer 1

Попробуйте исправить проблему с перепрошивкой, установив display: block для элемента <a> в этом узком столбце.

Answer 2

Если вы знаете начальную и конечную точки каждой строки, вы можете поместить интервал вокруг каждой строки и превратить его в встроенный блок

#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>

Answer 3

Используйте относительные единицы для установки отступа.

Добавление padding: 0.2ex 0; background: red; с помощью Firebug / Dragonfly к ссылке на пример в вопросе мне подходит, независимо от размера шрифта (установленного с помощью CSS или увеличения).

Единственная проблема с изменением размера шрифта в Firefox состоит в том, что фон начинает перекрывать предыдущую строку; но это проблема line-height.