Можно ли средствами HTML сделать отточие?

A. Kaminsky · February 3, 2009

Можно ли текстовыми средствами HTML сделать отточие?

Т.е. вопрос следующий, можно ли заполнить строку в тянущейся таблице точками до конца строки.

Примерно так:

Товаров .................................................. 1 шт.

На сумму .............................................. 50 руб.

rash · February 3, 2009

В HTML для этого средств нет. Можно попробовать придумать какой-нибудь костыль, например, с borderstyle: dotted или даже замощенным фоном, но это еще хуже, чем без отточия.

Vlad · February 4, 2009

Через CSS можно все... или почти все. Читать здесь.

http://neveragainblog.com.ua/archives/87

SelenIT · February 4, 2009

rash, а чем так плох вариант с имитацией отточия пунктирной границей?

rash · February 4, 2009

Да, пожалуй я погорячился.

Но все равно стандартных средств для этого нет, приходится имитировать подручными средствами.

Fu-tai · February 7, 2009

Тема уже раз сто поднималась.

Мне вариант с фоновой картинкой больше симпатизирует, вопервых потому что при цвеличении\уменьшении кегля, точки не превращаются в букашек, а во вторых потому что они не мешают и замена, одной гифки куда проще чем вылавливание свойства в коде. Хотя второе справедливо только для больших ресурсов.

A. Kaminsky · February 16, 2009

Всем большое спасибо!

Буду экспериментировать и с пунктирной границей и со стилями.

IceBars · April 25, 2009

Извинияюсь, если глупость:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

  <head>

<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
<title>Многоточие</title>
<style>
body {
margin:0px;
overflow-x:hidden;
background-color:rgb(75,75,75);

}

.stroka {
width:400px;
background-color:rgb(0,135,135);
padding-top:15px;
padding-left:15px;

}

._1, ._2, ._3  {
display:inline-block;

}

._1 {

width:20%;
}
._2 {
overflow:hidden;
width:50%;
}
._3 {
width:25%;
</style>
  </head>

<body>

  <div class="stroka">
<div class="_1">
Товаров
</div>
<div class="_2">
................................................................................
.......................................................
</div>

<div class="_3">
1 шт.
</div>
  </div>

 <div class="stroka">
<div class="_1">
На сумму
</div>
<div class="_2">
................................................................................
.......................................................
</div>

<div class="_3">
50 руб.
</div>
  </div>


</body>
</html>

Nekromancer · April 25, 2009

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

IceBars · April 25, 2009

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

Посмотри повнимательнее: точек добавлено заранее много, и регулировать их количество не нужно. Лишние точки скрываются. А в примере это реализовано картинкой, которую пользователь может и не увидеть, если выключил показ изображений для экономии трафика.

Edited April 25, 2009 by IceBars

SelenIT · April 25, 2009

IceBars, во-первых, в варианте с border-bottom: 1px dotted всё видно и без картинок. Во-вторых, отточие -- это чистой воды оформление (т.е. вотчина CSS), а в вашем примере эти кучи точек засоряют даже не разметку, а сам текст страницы. Так что глупость, и не отпирайтесь

Но с уходом IE7, возможно, получится извлечь из вашей идеи разумное зерно — если засунуть эти точки в псевдоэлемент :after.

rash · April 26, 2009

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

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

Nekromancer · April 27, 2009

отключает графику в основном с КПК и смартов.. я не думаю чтоб им уж так сильно нужны эти точки..

SelenIT · April 28, 2009

Лично я не видел существенного разнобоя в отрисовке border-style: dotted со времен IE5 (который его тупо не понимал и рисовал как dashed). Хотя согласен, что точки в этой границе оказываются чаще, чем в обычном многоточии.

На правах извращения — способ увеличения расстояния между точками

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>разреженные точки</title>
<style type="text/css" media="screen">
div { border-bottom: 1px dotted #000; }
p, span, b { position: relative; bottom: -2px; }
p { margin: 0; border-bottom: 2px dotted #fff; text-align: right; }
span, b { background: #fff; }
span { float: left; }
</style>
<div>
	<p>
		<span>Граница</span>
		<b>пунктир</b>
	</p>
</div>

Проверено в FF3 и IE7, но и в остальных проблем быть не должно, мне кажется...

rash · April 28, 2009

Ого... Нет, на практике я так делать не буду -)

psywalker · May 9, 2009

Мужики, этот топик я увидел впервые, а недавно, может неделю назад я по совпадению решил заморочится над такой же задачей, вобщем переверстал кучу вариантов и пришёл к одному, потому что в нём одни плюсы, и он напрочь Железный, тоесть чтобы вы не делали с ним, он не развалиться и его вид не испортиться, а поставил я себе такую задачу:

1) Решение должно быть сделано на Относительных Единицах "em", для того, чтобы хорошо и правильно масштабировалось при увеличении размера шрифта

2) Шрифт можно было увеличивать или понижать до Посинения и всё должно отображаться также, как и при нормальном шрифте

3) Минимальный размер кода, а точнее наименьшее количество элементов и Css

4) При добавлении Огромного объёма текста в левую колонку вид не портился, а оставался точно такойже

5) Строго никакой графики, только цвета фона и Бордюры максимум

6) Да, и конечно же тестировал это решение во всех броузерах, при любом расширении экрана и т.д.

7) Способ должен быть наглухо железным, как я люблю, За идею я взял меню, ресторанное или неважно...вобщем вот что я навоял:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Контент</title>
 <style type="text/css">
	*{ margin: 0; padding: 0;}
	body { font: bold .625em Tahoma, Geneva, sans-serif; margin: 2em;}

	   ul{
		 width: 30em;
			 background: #eff2df; 
		 list-style: none; 
		 padding: 2em;
		 position: relative;
		 left: -.3em;
		 top: -.3em;
	}
		 li { zoom: 1; position: relative; border-bottom: .1em dotted #F00; padding-right: 10em;}
		   li b { padding-right: .5em; position: relative; bottom: -.5em; left: 0; background: #eff2df;}
		   li span { 
				 position: absolute; 
				 right: 0; 
				 bottom: -.5em;
				 background: #eff2df;
				 padding-left: .5em;
		}


 </style>
</head>

<body>

 <ul>
	<li>
		   <span>Цена длинная</span>
	   <b>Неплохая еда говорят у вас в ресторане, а можно посмотреть меню?Неплохая еда говорят у вас в ресторане, а можно посмотреть меню?Неплохая еда говорят у вас в ресторане, а можно посмотреть меню?</b>
		</li>
	 <li> 
		<span>Цена длинная</span><b>Неплохая еда говорят у вас в ресторане, а можно посмотреть меню? </b>
		  </li>

		<li>
	   <span>Цена длинная</span>
	   <b>Неплохая еда говорят у вас в ресторане, а можно посмотреть меню? </b>
	</li>
	<li>
	   <span>Цена длинная</span>
	   <b>Неплохая еда говорят у вас в ресторане, а можно посмотреть меню?</b>

	</li>
		<li>
	   <span>Цена  длинная</span>
	   <b>Неплохая еда говорят</b>
	</li>
	<li>
	   <span>Цена длинная</span>

	   <b>Неплохая еда говорят у вас</b>
	</li>
 </ul>

</body>
</html>

В некоторых строчках спецом много текста, чтобы был виден смысл :rolleyes:

Edited May 10, 2009 by psywalker

Markup-UA · May 13, 2009

Ребята вы чего

html

<div>
  <span>Товаров </span>
  <em>1 шт.</em>
</div>

css

div{
	background: url(картинка точки) repeat-x 0 95%;
	width: 150px;
	overflow: hidden;
}
span{
	float: left;
	background: #fff;
}
em{
	float: right;
	background: #fff;
	font-style: normal;
}

и всего делов

работает везде

psywalker · May 13, 2009

Markup-UA

1) Дружище, а если текста будет много, что тогда будет с твоим вариантом, не думал об этом?

2) Использовать картинки нехорошо)), что ты скажешь, если изображение отключат?

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

Edited May 13, 2009 by psywalker

rash · May 13, 2009

Markup-UA
Использовать картинки нехорошо)), что ты скажешь, если изображение отключат?

А ничего не будет, весь контент как был, так и останется, в том же положении, на тех же строках и будет совершенно ясно, что к чему относится.

psywalker · May 13, 2009

rash

Всё может и будет ясно, но сам вид всего этого будет плохим, поэтому вариант, который Я привёл, мне кажется более чётким

Nekromancer · May 14, 2009

Когда люди отключают картинки(Даже такое бывает ), они понимают на что они идут и также понимают, что ограничивают себя.

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

Что по поводу этого:

1) Дружище, а если текста будет много, что тогда будет с твоим вариантом, не думал об этом? wink.gif

Содержание помещают как правило на большое пространство или в фиксированное пространство. Так вот, я думаю там врятли будет много текста, а если всё таки и будет точки всё равно будут с низу. Читаем код внимательнее.

psywalker · May 14, 2009

Nekromancer

Извините, но я не согласен насчёт того, что там не будет много текста и т.д, я считаю, что всегда надо учитывать самые худшие обстоятельства, да а потом сами попробуйте заполнить левую колонку большим содержанием Мой способ, а потом Ваш и поймёте, о чём я говорю, всё должно иметь одинаковый вид при любой погоде! И это главное для меня при вёрстке и даже таких маленьких задачек...

Nekromancer · May 14, 2009

Всё в любом случае будет отображаться как надо. Точки будут снизу.

psywalker · May 14, 2009

да, точки будут снизу, но задача такая, чтобы точки эти были между левым и правым словом, а не под, над или около них)))

темболее какое расстояние сразу становиться большое между левым содержанием и нижними точками

Nekromancer · May 14, 2009

вам чё нарисовать?

1.Мало текста...............................................3.

2.Много теста теста теста теста теста теста теста

теста теста теста теста..................................4.

точки это картинки естесьно..

background: url('') center bottom repeat-x;

так понятнее?

П.С. у нормальных людей кстати такого не будет. а всё будет в одну строчку

Edited May 14, 2009 by Nekromancer

psywalker · May 14, 2009

ок, спасибо за разъяснение, обязательно учту этот способ, но всё таки мне не нравятся две вещи: 1) Картинки 2) То, что при заполнении левый текст оказывается поверх правого, как у вас на рисунке..

Sign In

Можно ли средствами HTML сделать отточие?

Question

Link to comment

Share on other sites

26 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

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