Заполните доступные пробелы между маркировками с точками или дефисами
У меня есть страница с маркировками, которые содержатся в отделении, маркировки имеет переменную с, и я хочу заполнить пробелы между обоими с символами, точками или '-'.
Например.
Мой текст метки 1-----------Некоторый текст Здесь.
Мой текст 2-----------------------Другой текст.
Если Вы замечаете, что оба текста выровнены (или по крайней мере я пробую), могла бы быть проблема подсчета символов, но символ может иметь другую ширину, любой знает очевидный способ выполнения этого программно у Asp. Сеть, CSS, jQuery или что-либо еще?
Обновление
................
Кто-то предложил в ответах, выравнивают обе маркировки с CSS, но я думаю, что у меня будет та же проблема с символами в середине, которая может быть другой маркировкой, конечно. Какие-либо мысли?
Обновление
.................
Ответ от Patrick действительно близко к решению, но теперь дефисы не показывают в IE8, возможно, существует мисс, понимают в одном из моих комментариев, это должно работать над IE7, IE8 и Firefox, только эти браузеры.
Благодаря всем.
3 ответа
Попробуйте это: http://jsfiddle.net/FpRp2/4/ (обновлено, теперь работает в ie7)
Решение, которое дал @Marcel, использовать пунктирную рамку вместо дефисов, решило последнюю проблему с IE7.
(Примечание, пока что я тестировал только в Safari, Firefox и Chrome.)
EDIT: IE8 работает. Работаем над исправлением для IE7.
HTML
<div class='outer'>
<div class='container'>
<div class='filler'></div>
<span class='label'>some label</span>
<span class='text'>some text</span>
</div>
<br>
<div class='container'>
<div class='filler'></div>
<span class='label'>some other label</span>
<span class='text'>some other text</span>
</div>
</div>
CSS
.outer {
display: inline-block;
*display: inline;
zoom: 1;
position: relative;
clip: auto;
overflow: hidden;
}
.container {
position: relative;
text-align: right;
white-space: nowrap;
}
.filler {
position: absolute;
left: 0;
right: 0;
border-bottom: 1px dashed #333;
height: 50%;
}
.label {
background: white;
float: left;
margin-right: 20px;
padding-right: 4px;
position: relative;
}
.text {
background: white;
padding-left: 4px;
position: relative;
}
Вам нужно использовать CSS, чтобы настроить расположение двух частей содержимого. Либо разбейте метку на две метки и примените к каждой из них классы css, либо оберните каждый фрагмент текста внутри метки тегом и оформите их таким образом.
Заполнение пустого пространства символами в попытке настроить макет не является правильным подходом и не рекомендуется по тем же причинам, по которым вы не форматируете текстовые документы, добавляя везде символы пробела.
Найдите первый экземпляр из трех пробелов. Я предполагаю, что это минимальное число, необходимое для создания «разрыва»
Найдите первый непробельный символ после этого.
Заменить все пробелы между индексом в №1 (+1) и индексом в №2 (-1). Это даст вам результаты, указанные выше.
Посмотрите другие ответы, чтобы узнать о более чистых способах сделать это с помощью CSS. Это был бы самый чистый способ отображения текста. Черточки выглядят как гетто. :)