Заполните пробелы между метками с точками или дефисами

У меня есть страница с метками, которые содержатся в div, метки имеют переменную с и я хочу заполнить пробелы между символами, точками или '-'.

Например.

Мой текст с надписью 1 ----------- Некоторые тексты здесь.

Мой текст 2 ----------------------- Другой текст.

Если вы заметили, что оба текста являются оправданными (или, по крайней мере, я пытаюсь), может быть проблемой подсчета символов, но символ может иметь разную ширину, любой знает, как это сделать программно в Asp.Net, css, jquery или что-нибудь еще?

Update

................

Кто-то, предложенный в ответах, выравнивает обе метки с помощью css, но я думаю, что у меня будет такая же проблема с персонажами в середине, что может быть другим ярлыком, конечно. Любые мысли?

Update

.................

Ответ от Patrick действительно близок к решению, но теперь дефисы не показаны в IE8, возможно, в одном из моих комментариев понимается ошибка, она должна работать на IE7, IE8 и Firefox, только эти браузеры.

Спасибо всем.

Ответы

Ответ 1

Попробуйте следующее: 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;
}

Ответ 2

Я реализовал это на таблице с чистым CSS и даже без использования какого-либо диапазона или div.

CSS:

.dot-table td {
    max-width:200px;
    overflow:hidden;
    white-space:nowrap;
}
.dot-table td:first-child:after {
    content:" - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - "
}

HTML

<table class="dot-table">
  <tr>
    <td>
       Coffee
    </td>
    <td>
       45 INR
    </td>
  </tr>
  <tr>
    <td>
       Tea
    </td>
    <td>
       36 INR
    </td>
   </tr>
</table>

Подробный вывод (с сайта, который я разработал) A detailed table with filling dots

Просмотреть его в прямом эфире здесь.

Ответ 3

Вам нужно использовать CSS для настройки макета двух частей контента. Либо раскройте ярлык на две метки, и примените классы css к каждому, либо оберните каждый бит текста внутри вашей метки тегом <span> и создайте их таким образом.

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

Ответ 4

  • Найдите первый экземпляр трех пробелов. Я предполагаю, что это минимальное число, необходимое для создания "разрыва"

  • После этого найдите первый непространственный символ.

  • Замените все пробелы между индексом в # 1 (+1) и индексом в # 2 (-1). Это даст вам результаты выше.

Проверьте другие ответы для более чистых способов сделать это с помощью CSS. Это был бы самый чистый способ отображения текста. Черты выглядят гетто.:)

Ответ 5

Решение с использованием flexbox, с поддержкой переполнения текста: эллипсис для сохранения содержимого в 1 строке:

http://codepen.io/anon/pen/jPZdgr

.item {
  display: flex;
  justify-content: space-between;
}
.descripcion {
  /*background-color: green;*/
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.descripcion:after {
  content: " ........................................................................................................................................................................................................................................................................................."
}
.precio {
  /*background-color: red;*/
  flex-shrink: 0;
}
<div class="item">
  <div class='descripcion'>Junta la trócola</div>
  <div class='precio'>0´33</div>
</div>
<div class="item">
  <div class='descripcion'>Gamusinos en oferta c/u</div>
  <div class='precio'>6´47</div>
</div>
<div class="item">
  <div class='descripcion'>Saco de rafia y linterna a pedales</div>
  <div class='precio'>12´663584153,351,5,154</div>
</div>
<div class="item">
  <div class='descripcion'>Jaula de bambú con led para gamusinos</div>
  <div class='precio'>21´99</div>
</div>
<div class="item">
  <div class='descripcion'>Otro concepto más repartido entre más de una, o de dosOtro concepto más repartido entre más de una, o de dosOtro concepto más repartido entre más de una, o de dosOtro concepto más repartido entre más de una, o de dosOtro concepto más repartido entre
    más de una, o de dosOtro concepto más repartido entre más de una, o de dos</div>
  <div class='precio'>1.694</div>
</div>
<div class="item">
  <div class='descripcion'>Chismes y achiperres surtidos</div>
  <div class='precio'>0´10</div>
</div>
<div class="item">
  <div class='descripcion'>Yugo, barzón, cavijal y mancera</div>
  <div class='precio'>33´7433333333333333333333</div>
</div>
<div class="item">
  <div class='descripcion'>Coyunda, sobeo, ramales y cordel</div>
  <div class='precio'>125´87</div>
</div>
<div class="item">
  <div class='descripcion'>Media, cuartilla, celemín y 1 envuelza</div>
  <div class='precio'>48´04</div>
</div>

Ответ 6

Простое решение, которое поддерживает разрывы строк и работает в IE 8+, FF и Chrome. IE ниже 8 поддерживается, когда точки помещаются непосредственно в div пробелов пробелов.

CSS

.spacefill,
.spacefill-dots {
  line-height: 18px;
  font-size: 16px;
}

.spacefill {
  position: relative;
  padding: 0;
  margin: 0;
  border: 0;
}

.spacefill-dots {
  z-index: -1;
  /* Push dots behind text */
  height: 18px;
  /* Same as line-height */
  border: 0;
  margin: 0;
  padding: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  overflow: hidden;
}

.spacefill-text {
  background: white;
  /* Very important. Choose backgroundcolor*/
  padding-right: 4px;
  /* Optional space before first point*/
}

.spacefill .spacefill-dots::after {
  content: "........................................................................................................................................................................................................................................................................................................................................................................................................................................"
}

HTML:

<div class="spacefill">
   <div class="spacefill-dots"></div>
   <span class="spacefill-text">Short title</span>
</div>

Вот простой пример для таблицы содержимого: https://jsfiddle.net/dua2tp11/