Stretch text to fit width of div

css, html

Solution

This can be done with `text-align:justify` and a small hack. See here:

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>

The trick is to add an element after the text that pretends to be really long word. The fake word is actually a `span` element with `display:inline-block` and `width:100%`.

In my example the fake word is in red and given a height of 1em, but the hack will work even without it.

Problem

I have a div with a fixed width, but the text inside the div can change. Is there a way of setting, with css or other, the spacing between the letters so the text always fills the div perfectly?

Original source

Related problems