Форум Сайтостроение Веб-строительство

Как реализовать подчеркивание текста без увеличение размера блока/текста по вертикали

Р
На сайте с 07.02.2013
Offline
178
рецидивист
680

К примеру, есть строка текста: 


<ul>

<li>

<p>Земную жизнь пройдя до <span>половины</span>, Я очутился в сумрачном лесу</p>

</li>

<li></li>

...

</ul>

С таким оформлением: 


li{

    font-size: 14px;

    font-weight: 400;

    line-height: 20px;

}

span{

border-bottom:1px dashed;

}

Нижнее подчеркивание увеличивает размер элемента списка на 1 пиксель, чего мне бы не хотелось. Можно заменить border-bottom на text-decoration, но тогда подчеркивание будет сплошное. Можно ли реализовать подчеркивание пунктиром без увеличение высоты элемента списка?

Ayavryk
На сайте с 11.10.2003
Offline
209
Ayavryk
#1

Уменьшите line-height на единицу и задайте inline-block для span

UPD:

http://fiddle.jshell.net/4q6fY/

Тынгыр, мынгыр, комсомол (http://erum.ru). Ехари, ехари, (жалобно) аяврик. /народная тунгусская песня/
[Удален]
#2

span{

border-bottom:1px dashed;

font-size: 13px;

}

как вариант:)

Р
На сайте с 07.02.2013
Offline
178
рецидивист
#3

Всем спасибо. Помогло уменьшение высоты линии, но не на один пиксель, а на шесть пикселей.

Ayavryk
На сайте с 11.10.2003
Offline
209
Ayavryk
#4
рецидивист:
Всем спасибо. Помогло уменьшение высоты линии, но не на один пиксель, а на шесть пикселей.

?????? Там же зазора не останется межу шрифтом и линией.

И вообще непонятно как это будет работать, если высота линии меньше высоты шрифта. Наверняка в каком нибудь броузере скукожится.

богоносец
На сайте с 30.01.2007
Offline
774
богоносец
#5
рецидивист:

font-size: 14px;
font-weight: 400;
line-height: 20px;

А в браузере сделайте ограничение на размер шрифта и посмотрите. И никогда так не делайте. Не фиксируйте line-height, задавайте в относительных единицах.

A
На сайте с 19.07.2010
Offline
130
admak
#6
рецидивист:
Всем спасибо. Помогло уменьшение высоты линии, но не на один пиксель, а на шесть пикселей.

проверьте в других браузерах, IMHO будет опс..

попробуйте поиграться на тексте с

padding-bottom: 1px;

и на спане

padding-bottom: 0px;

.............
Р
На сайте с 07.02.2013
Offline
178
рецидивист
#7

А вот и нет, проверял в ie7-10, chrome, safari, mozilla, opera, maxton и все работает корректно.

Как я понял, высота элемента 20px + 1px нижнее подчеркивание = 21 px

Высота шрифта 14px. Получается 14px + 1px нижнее подчеркивание. Таким образом подчеркивание располагается на 1 пиксель ниже самого шрифта.

Исправьте меня, если неточен.

Соответствие размеров шрифтов задаваемых Увеличивается Border при использовании httpS для сайта подешевле

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий