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

Justifying Text and Filling Space with Dots Using CSS

With the need to display data uniformly across different products and doses, it becomes essential to find a way to format text without using monospaced fonts. This challenge has been addressed in the past, and one of the potential solutions involves using inline styles such as

and

to create a description list.

In this context, the

element is used to represent the drug name, while the

element represents the dose. By setting a fixed width for the

element and adding a pseudo-element with a long string of dots (e.g., ".................................................................................."), we can create the desired justification effect.

Here's an example to demonstrate the approach:

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>

This technique effectively justifies the text and fills the remaining space with dots, creating a uniform and visually appealing display. However, it's important to note that this solution has certain limitations, such as:

• Incompatibility with Internet Explorer versions prior to 8
• Inability to use HTML entities within the content property (e.g., "·") due to limitations in the content property

Despite these limitations, for most practical purposes, this approach provides an elegant and unobtrusive way to create justified text and fill space with dots using CSS.

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