Question: I have got contentEditable `div` which each letter have own element, like: 

```
<div contenteditable="true">
    <p id="p1">
        <span id="s1">S</span>
        <span id="s2">o</span>
        <span id="s3">m</span>
        <span id="s4">e</span>
        <span id="s5">&nbsp;</span>
        <span id="s6">t</span>
        <span id="s7">e</span>
        <span id="s8">x</span>
        <span id="s9">t</span>
    </p>
</div>

```

And I am trying to justify some longer text using `text-align: justify`, but this don't work. That is strange, because `text-align: center` and `text-align: right` works. 

After that I am trying to do that using a script which adds `margin-right` to each space, but when I am writing new text into paragraph it crashes. 

How can I do that (and save `id` and other attributes in each element) using JavaScript and/or JQuery?

Answer: 
The harsh answer is that it is not easy to achieve what you are looking for if you want normal justify behavior but keeping all the spans. 

But if you want to attempt such a thing you need to make your own justify script. To do this you need to loop through all the spans and when you enter a new line (check the offset of the span from top) you need to go back to the last space and then try to justify all the characters previously iterated. This can be done by encapsulating them in a new span or div and justify inside that (encapsulating div needs to be 100% width). Either just using css or by changing with of the space spans to have only the spans expand.

SO question to answer how to check the offset of the span: [How to select nth line of text (CSS/JS)](https://stackoverflow.com/questions/1966441/how-to-select-nth-line-of-text-css-js)

I am sorry but without adding more spans/divs or removing spans there is no way to justify this content correctly what I can see.
use text-align: justify with display:flex(mandatory at times) this should work.