How to Align Text to the Right with Uniform Dot Spacing using Simple CSS?

Justifying Text with Dots in CSS

Question: How can I align text to the right with uniform dot spacing using simple CSS, as seen in this example?

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

Answer: To achieve this justification, a technique utilizing the :after pseudo-element is commonly employed:

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:

• IE versions below 8 are not supported.
• Content cannot include HTML entities, limiting the use of special characters like ·. However, UTF-8 characters can fulfill most needs.

The above is the detailed content of How to Align Text to the Right with Uniform Dot Spacing using Simple CSS?. For more information, please follow other related articles on the PHP Chinese website!