Длинное подчеркивание

pattaya · November 2, 2010

Здравствуйте! Подскажите пожалуйста, как сделать длинную полосу в строке с текстом, на примере как делает text-decoration:underline, но некоторые слова пропущены, а на их месте только подчеркивание?

d0ublezer0 · November 3, 2010

не совсем понятен вопрос. может span с бордюром по низу?

pattaya · November 3, 2010

Да, возможно, это <span> с display:inline-block?

Great Rash · November 3, 2010

Зачем inline-block? Задайте просто бордер спану, он же и так инлайн-элемент.

UPD: Не, инлайн-блок все-таки нужен...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		html,
		body {
			height: 100%;
		}

		html {
			font-size: 100.1%;
		}

		body {
			font: 62.5%/1.5em Arial, Tahoma, Verdana, sans-serif;
			color: #000;
			background: #fff;
		}

		span {
			display: inline-block;
			position: relative;
			top: 2px;
		}

		span img {
			height: 1em;
			width: 10ex;
			border-bottom: 1px solid;
		}

		div {
			padding-bottom: 10px;
		}
	</style>

	<script type="text/javascript">
		window.onload = function() {
			var b = document.getElementsByTagName('button')[0];
			var div = document.getElementsByTagName('div')[0];
			b.fSize = 10;

			b.onclick = function() {
				div.style.fontSize = this.fSize + 'px';
				this.fSize++;
			}
		}
	</script>
</head>

<body>

	<div>
		text text <span><!-- Пустой однопиксельный gif --><img src="http://lists.w3.org/Archives/Public/wai-eo-editors/2005Aug/att-0003/Blank_Bkgrd.gif" alt="" /></span> <a href="#">text</a> text
	</div>
	<button>Увеличить шрифт</button>

</body>
</html>

pattaya · November 3, 2010

Ну, а если без рисунка, а просто бордер-топ в спане(он же инлайн), то полосы не будет, я так понимаю, а если display:inline-block - тогда полоса получается, или это не правильное решение?

Vlad · November 3, 2010

Можно еще подчеркивание использовать _______ и сместить его вниз через position, top.

Great Rash · November 3, 2010

Фишка в том, что просто бордер "висит" ниже чем подчеркивание и не получится задавать смещение так, чтобы при изменении размера шрифта бордер был всегда вровень с подчеркиванием (по крайней мере у меня на вскидку не получилось). Поэтому я сделал картинку с высотой 1em (высота буквы), и бордер сделал у картинки. Но т.к. бордер "прилип" к картинке (картинка по умолчанию выравнивается по базовой линии текста), то он "висит" на 2 пикселя выше чем подчеркивание текста, поэтому нам надо сместить контейнер картинки на 2 пикселя вниз (position: relative; top: 2px;). Теперь при изменении шрифта "подчеркивание" будет всегда на своем месте.

Вообще я не проверял этот способ на кроссбраузерность, так что в ИЕ(6) может работать по другому, т.к. там текст вообще подчеркивается иначе.

sigma77 · November 3, 2010

Может я не понимаю вопроса, но text-decoration подчеркивает всю строку, почему нельзя просто его и использовать? Пропущенным словам visibility: hidden, ну или просто тот же спан с display:inline и шириной.

<span style="text-decoration: underline">Lorem ipsum <span style="visibility: hidden">dolor sit amet,</span> consectetur adipiscing elit.</span>
<span style="text-decoration: underline">Lorem ipsum <span style="display: inline-block; width: 100px;"></span>dolor sit amet, consectetur adipiscing elit.</span>

psywalker · November 3, 2010

ТС, а покажи скриншот задания.

pattaya · November 3, 2010

sigma77 · November 3, 2010

del

Edited November 3, 2010 by sigma77

SelenIT · November 3, 2010

А там случаем не поле ввода должно быть, стилизованное под бумажный бланк?

pattaya · November 3, 2010

нет, так и должно быть

psywalker · November 3, 2010

		<p>	Soon our new web shop
				will be <span style="text-decoration: underline;"><span style="visibility:hidden;">launche again</span></span> with
				new design and great
				featurearmed with many
				new products and the
				</p>

pattaya · November 3, 2010

Ok., спасибо большое. А использовать <span> с display:inline-block и нижним бордером не рекомендуется? Мне просто хочется научиться правильно "составлять" код! Еще раз спасибо!

psywalker · November 3, 2010

Ok., спасибо большое. А использовать <span> с display:inline-block и нижним бордером не рекомендуется? Мне просто хочется научиться правильно "составлять" код! Еще раз спасибо!

Да почему-же. Если код рабочий, то можно и display:inline-block.

pattaya · November 3, 2010

Понял, спасибо!

Sign In

Длинное подчеркивание

Question

Link to comment

Share on other sites

16 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information