Why justifying with execCommand does not work properly?

Question

Why justifying with execCommand does not work properly? check the below code:

 $('#JustifyLeft').click(function(){ document.execCommand("JustifyLeft", false, ""); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>Select whole text and click the button</p> <div class="editable" contenteditable="TRUE" style="font-size: 27px; text-align: center;"> <span style="font-weight: bold; font-style: italic; text-decoration: underline;">Hi<span style="font-size: 35px;">I</span>am<span style="font-size: 18px;">Blah Blah</span>Ok</span> </div> <input type="button" id="JustifyLeft" value="Align Left"> 

After selecting the whole text and Justifying it you will see the underlines only remained on <text> nodes and <span> nodes have not text-decoration.

Is this a bug? Is there a way to correct it?

Answer 1

If you will look onto element structure in developer tool you will see execCommand is adding closing </span> after Hi, am and Ok and wrapping it with a <div> Like below

    <div style="text-align: left;">
    <span style="font-style: italic; font-weight: bold; text-decoration: underline;">Hi</span>
    <span style="font-style: italic; font-weight: bold; font-size: 35px;">I</span>
    <span style="font-style: italic; font-weight: bold; text-decoration: underline;">am</span>
    <span style="font-style: italic; font-weight: bold; font-size: 18px;">Blah Blah</span>
    <span style="font-style: italic; font-weight: bold; text-decoration: underline;">Ok</span>
    </div>

You can correct it by just changing your first <span> to <div> like below

<div style="font-weight: bold; font-style: italic; text-decoration: underline;">Hi
<span style="font-size: 35px;">I</span>am
<span style="font-size: 18px;">Blah Blah</span>Ok
</div>