To justify text in spans within a paragraph

Question

I have the following HTML structure with multiple spans within a paragraph:

<p><span>Hello</span><span>I</span><span>am</span>... </p>

The problem is I cannot justify the text in the paragraph.

text-align: justify - doesn't work.

Answer 1

You can make the paragraph a flexbox and use space-between to simulate justify.

p {
  display: flex;
  justify-content: space-between;
}

<p><span>Hello</span><span>I</span><span>am</span></p>

Answer 2

If you want it to look like the ordinary sort of justification that you would get on an ordinary paragraph then you can use text-align: justify - putting spaces in with an after pseudo element on each span:

p {
  text-align: justify;
}

span::after {
  content: ' ';
}

<p><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span><span>Hello</span><span>I</span><span>am</span>  </p>