CSS - word-break in paragraph which each letter is in other element

Question

I have got paragraph which each letter is in other element. For example:

<p>
    <span>S</span>
    <span>o</span>
    <span>m</span>
    <span>e</span>
    <span>&nbsp;</span>
    <span>t</span>
    <span>e</span>
    <span>x</span>
    <span>t</span>
</p>

And I am trying to separate Some and text, but I see this:

p {
border: 1px solid black;
width: 195px;
height: 200px;

}

<p>
    <span>S</span><span>o</span><span>m</span><span>e</span><span>&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span>&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span>&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span>&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span>&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span>&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span>&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span>&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span>&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span>&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span>&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span>&nbsp;</span>
</p>

How can I get something like this

p {
border: 1px solid black;
width: 195px;
height: 200px;

}

<p>
     Some text Some text Some text Some text Some text Some text  
</p>

How can I break words in this paragraph and how to add text-align: justify effect? Thanks for help.

Answer 1

You could split by character using:

p span {display:inline-block;}

p {
  border: 1px solid black;
  width: 195px;
  height: 200px;
}

p span {
    display: inline-block;
}

<p>
    <span>S</span><span>o</span><span>m</span><span>e</span><span class="space">&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span class="space">&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span class="space">&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span class="space">&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span>&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span class="space">&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span class="space">&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span class="space">&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span class="space">&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span class="space">&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span class="space">&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span class="space">&nbsp;</span>
</p>

Otherwise, I think you would have to add a class to the <span>s with spaces so that the browser can know where to split words.

p {
  border: 1px solid black;
  width: 195px;
  height: 200px;
}

p span {
  display: inline;
}
  
p span.space {
  display: inline-block;
  word-break: break-all;
}

<p>
    <span>S</span><span>o</span><span>m</span><span>e</span><span class="space">&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span class="space">&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span class="space">&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span class="space">&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span>&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span class="space">&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span class="space">&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span class="space">&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span class="space">&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span class="space">&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span class="space">&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span class="space">&nbsp;</span>
</p>

Edit: I just realised that this will not allow justifying the text. Instead, you can use:

p span.space:after {content: "\00200B";}

The only problem from there is that the last space in the line still has a width to it.

p {
  border: 1px solid black;
  width: 195px;
  height: 200px;
  text-align: justify;
}

p span {
  display: inline;
}

p span.space:after {
    content: "\00200B";
}

<p>
    <span>S</span><span>o</span><span>m</span><span>e</span><span class="space">&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span class="space">&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span class="space">&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span class="space">&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span>&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span class="space">&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span class="space">&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span class="space">&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span class="space">&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span class="space">&nbsp;</span><span>S</span><span>o</span><span>m</span><span>e</span><span class="space">&nbsp;</span><span>t</span><span>e</span><span>x</span><span>t</span><span class="space">&nbsp;</span>
</p>