How Can I Make Text Stretch Horizontally to Fill a Div\'s Width?

Stretching Text Horizontally to Fit Div Width

In web development, it's often desirable to have text expand horizontally to fill a div of a specific width. However, by default, text will not stretch to occupy the extra space.

Solution: Text Justification and Inline Element

To achieve this effect, we can utilize CSS text-align:justify along with a minor hack:

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>

By justifying the text within the div and adding an empty span element with a width spanning the entire div, we force the text to stretch horizontally to fill the available space.

This technique ensures that text always perfectly fills the div, regardless of its length, creating a visually appealing layout.

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