How to Justify Text and Fill Empty Spaces with Dots Using CSS?

Justifying Text and Filling Spaces with Dots Using CSS

This question discusses the need to uniformly align text and fill the remaining space with dots, specifically for displaying product information with drugs and doses.

CSS Solution

To achieve this formatting with CSS, an elegant and partially supported solution is provided:

<code class="css">dl { width: 400px }
dt { float: left; width: 300px; overflow: hidden; white-space: nowrap }
dd { float: left; width: 100px; overflow: hidden }

dt:after { content: " .................................................................................." }</code>

HTML Implementation

<code class="html"><dl>

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

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

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


</dl></code>

Limitations

This solution has the following limitations:

• Not supported by Internet Explorer versions older than 8.
• Content property accepts only literal characters, not HTML entities like ·. However, UTF-8 characters cover a wide range of needs in this context.

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