Устранение пробелов между строками текста

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

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

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

Lorem ipsum dolor sit amet, conctetur adipiscing elit. In est. Nunc aliquam, eros a aliquam conquat, ante diam rutrum risus, et dignissim ligula turpis et ante. Maecenas leo neque, euismod in, aliquam et, molestie ac, ligula. Целое число venenatis. Pellentesque enim. Меценат аликвет, мучитель в молести содалес, урна velit pulvinar lorem, ac malesuada nibh turpis eu Tortor.

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


text css
person DisgruntledGoat    schedule 10.04.2009    source источник
comment
Что именно вы имеете в виду, но это не работает, когда текст больше; Мне нужно больше набивки? Вы можете привести пример? Разве это не исправляет использование относительных единиц для заполнения?   -  person mercator    schedule 11.04.2009
comment
Вероятно, вы можете попробовать это с помощью Firebug по ссылке выше (теперь исправлено). Если вы добавите фон к ссылке, вы увидите пробел. Теперь увеличиваем отступ, пропадание пропадает. Теперь увеличиваем размер шрифта, снова появляется пробел. Так что прокладка иногда работает, но ненадежна.   -  person DisgruntledGoat    schedule 12.04.2009

Ответы (3)


arrow_upward
7
arrow_downward

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

person Peter Perháč    schedule 10.04.2009
comment
Не страшное решение. Проблема в этом случае заключается в том, что эффект наведения появляется, когда мышь находится в сгенерированном поле, но не на самом деле над ссылкой (то есть справа от строки). - person DisgruntledGoat; 11.04.2009

arrow_upward
1
arrow_downward

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

#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>
person wheresrhys    schedule 11.04.2009
comment
Я не уверен, что это намеренно, но в вашем диапазоне {} не будет ли второй display: inline-block отменять -moz-inline-block? - person David says reinstate Monica; 11.04.2009
comment
да, было бы. это в таком порядке, потому что ffx 2 не поддерживает встроенный блок, поэтому вам нужен хак, но ffx 3 поддерживает его, поэтому установка последнего встроенного блока гарантирует, что он применяется - person wheresrhys; 11.04.2009

arrow_upward
0
arrow_downward

Используйте относительные единицы, чтобы установить отступ.

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

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

person mercator    schedule 14.04.2009