Justified Spans

Can you justify spans and make them extend their background and render how you want?

by David Iglesias

HTML

<p>
<span>This is </span> <span>some text</span> <span>that may </span> <span>or may not</span> <span>get justified</span><span> by the browser.</span>
</p>

CSS

* {
  box-sizing: border-box;
  font-family: sans-serif;
}
p {
  text-align: justify;
  width: 120px;
}
span {
  white-space: pre-line;
}
span:nth-child(2n) {
  background-color: #09f;
}
span:nth-child(2n+1) {
  background-color: #f90;
}