Jump to content

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


Recommended Posts

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

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

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

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

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

Link to post
Share on other sites

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

Link to post
Share on other sites

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

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

Link to post
Share on other sites

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

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

Link to post
Share on other sites
  • 2 weeks later...
  • 2 months later...

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

<!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 post
Share on other sites
глупость, тут у тебя надо самому каждый раз добавлять точки, а там они сами добавляются независимо от текста..

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

Edited by IceBars
Link to post
Share on other sites

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

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

Link to post
Share on other sites

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

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

Link to post
Share on other sites

Лично я не видел существенного разнобоя в отрисовке 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 post
Share on other sites
  • 2 weeks later...

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

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 post
Share on other sites

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

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 post
Share on other sites

Markup-UA

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

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

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

Edited by psywalker
Link to post
Share on other sites
Markup-UA

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

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

Link to post
Share on other sites

rash

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

Link to post
Share on other sites

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

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

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

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

Nekromancer

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

Link to post
Share on other sites

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

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

Link to post
Share on other sites

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

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

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

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

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

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

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

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

Edited by Nekromancer
Link to post
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
Reply to this topic...

×   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.

  • Member Statistics

    47,231
    Total Members
    1,451
    Most Online
    spertosik
    Newest Member
    spertosik
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...