How Can I Make Text Perfectly Fill a Container\'s Width Using CSS?

Stretching Text to Fit Container Width

Enhancing text aesthetics within a constrained div is a common challenge. When text content varies, it's desirable to maintain a polished and balanced visual appearance. This article explores how to achieve this seamless integration using a combination of CSS and a clever technique.

Solution: Text-Align Justification and a Subtle Trick

The CSS property text-align:justify evenly distributes text within a div, aligning it along both the left and right margins. However, standard justification maintains specified letter spacing. For a truly snug fit, a small hack adds a transparent span with a 100% width.

div{
  background-color:gold;
  text-align:justify;
}

span{
  background-color:red;
  width:100%;
  height:1em;
  display:inline-block;
}

<div>
  Lorem ipsum sit dolor
  <span> </span>
</div>

This trick essentially creates a "dummy" space that fills the remaining width of the div, forcing the text to expand and tightly align within its container.

The above is the detailed content of How Can I Make Text Perfectly Fill a Container\'s Width Using CSS?. For more information, please follow other related articles on the PHP Chinese website!