How to Justify Text with Dots Using CSS Without Monospaced Fonts?

How to Justify Text with Dots Using CSS

Query

Seeking a way to uniformly display text with leading dots, such as:

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

without resorting to monospaced fonts.

Solution

A simple yet effective solution utilizes CSS and a dl (description list) element:

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>

Limitations:

• Not supported in Internet Explorer 8 and earlier.
• Accepts only literal characters in the content property, excluding HTML entities like ·. However, UTF-8 characters should suffice for most practical scenarios.

The above is the detailed content of How to Justify Text with Dots Using CSS Without Monospaced Fonts?. For more information, please follow other related articles on the PHP Chinese website!