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

Question

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

Например.

Текст моей метки 1 ----------- Здесь немного текста.

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

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

Обновление

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

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

Обновление

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

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

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

Answer 1

Попробуйте это: http://jsfiddle.net/FpRp2/4/ (обновлено, теперь работает в ie7)

Решение, которое @Marcel дал для использования пунктирной линииГраница вместо текстовых дефисов решает последнюю проблему с IE7.

(Обратите внимание, что я тестировал только в Safari, Firefox и Chrome.)

РЕДАКТИРОВАТЬ: 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;
}

Answer 2

Я реализовал это для таблицы с чистым CSS и даже без использования span или 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>

Подробный вывод (с сайта, который я разработал)

Посмотреть вживую здесь .

Answer 3

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

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

Answer 4

Решение, использующее 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>

Answer 5

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

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/

Answer 6

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

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

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