Move text in span to the next line only partially

Question

Is it possible to move text in span to the next line only partially?

Here is the fiddle. If you will resize the width of the output window the text HHHHH... will move to the next line at some point, while it would be enough to just move a few characters to the next line. And the problem is that moving the whole text part to the next line leaves a lot of blank space.

html:

<div class="box">
       <span>Text </span> 
       <span>HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH</span>
    </div>

css:

.box {
    background-color:#00FF7F;
    height: auto;
    width:100%;
    word-wrap: break-word;    
}

Answer 1

.box span{white-space: pre-wrap;
    white-space: -moz-pre-wrap !important;
    white-space: -webkit-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal;}

<div class="box">
       <span>Text </span> 
       <span>HHHHHHHHHHHHHHHHHHHHHHHHHHHHhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhHHHHHHHHHHHHHHHHHHHHHHHHHH</span>
    </div>