将跨度文本仅部分移动到下一行

Question

是否可以将跨度文本仅部分移动到下一行？

Here是小提琴。如果您要调整输出窗口的宽度，则文本HHHHH...会在某个时候移到下一行，而仅将几个字符移到下一行就足够了。问题是将整个文本部分移到下一行会留下很多空白。

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>