CSS Обоснование текста, заполнение пробелов точками

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

Любой способ форматировать текст, как это, с помощью простого CSS? У меня есть БД различных продуктов с их лекарствами и дозами и вы хотите отображать их равномерно, но без моноширинных шрифтов.

Drug 1 ............  10ml
Another drug ......  50ml
Third ............. 100ml

Ответы

Ответ 1

Здесь элегантный и ненавязчивый с некоторыми ограничениями (см. ниже).

JSFiddle

CSS

dl { width: 400px }
dt { float: left; width: 300px; overflow: hidden; white-space: nowrap }
dd { float: left; width: 100px; overflow: hidden }

dt:after { content: " .................................................................................." }

HTML:

<dl>

    <dt>Drug 1</dt>
    <dd>10ml</dd>

    <dt>Another drug</dt>
    <dd>50ml</dd>

    <dt>Third</dt>
    <dd>100ml</dd>


</dl>

ограничения:

  • Не работает в IE < 8

  • Принимает только буквенные символы в свойстве content, без объектов HTML, поэтому нет &middot;, например. (Это не проблема, как указывает @Radek, поскольку символы UTF-8 должны быть способны обслуживать почти любую потребность здесь).

Ответ 2

Другой метод:

Live Demo

<style type="text/css">
table {
    border: 1px solid #000;
    width: 200px;
}
td span {
    background-color: #FFF;
}
td.name:before {
    clip: rect(0px, 190px, 20px, 0px);
    content: " ............................................................ ";
    position: absolute;
    z-index: -1;
}
td.amt {
    text-align: right;
}
</style>

<table>
    <tr>
        <td class="name"><span>Drug 1</span></td>
        <td class="amt"><span>10mL</span></td>
    </tr>
    <tr>
        <td class="name"><span>Another drug</span></td>
        <td class="amt"><span>50mL</span></td>
    </tr>
    <tr>
        <td class="name"><span>Third</span></td>
        <td class="amt"><span>100mL</span></td>
    </tr>
</table>

Аналогичные ограничения, как решение Pekka, и потребуют обновления кодов clip(), если ширина таблицы изменилась.

Ответ 3

Ну, вы можете использовать css для форматирования divs, чтобы получить эту структуру. Пример:

<div class="table">
<div class="prods">
Drug 1
Another drug
Third
</div>
<div class="dims">
10ml
50ml
100ml
</div>
</div>

Затем вы отформатируете его css:

.prods{float: left; width: 100px}
.dims{float: left; width: 35px}

Это просто очень простой пример, чтобы получить эту структуру, вы должны добавить больше визуальной детали, конечно.