Jump to content
  • 0

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


A. Kaminsky
 Share

Question

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

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

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

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

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

Link to comment
Share on other sites

Recommended Posts

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

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

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

Edited by IceBars
Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0

Лично я не видел существенного разнобоя в отрисовке 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, но и в остальных проблем быть не должно, мне кажется...

Link to comment
Share on other sites

  • 0

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

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 by psywalker
Link to comment
Share on other sites

  • 0

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

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;
}

и всего делов

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

Link to comment
Share on other sites

  • 0

Markup-UA

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

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

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

Edited by psywalker
Link to comment
Share on other sites

  • 0
Markup-UA

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

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

Link to comment
Share on other sites

  • 0

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

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

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

1) Дружище, а если текста будет много, что тогда будет с твоим вариантом, не думал об этом? wink.gif
Содержание помещают как правило на большое пространство или в фиксированное пространство. Так вот, я думаю там врятли будет много текста, а если всё таки и будет точки всё равно будут с низу. Читаем код внимательнее.
Link to comment
Share on other sites

  • 0

Nekromancer

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

Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

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

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

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

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

Edited by Nekromancer
Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy