Html 仅将跨距中的文本部分移动到下一行

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

这是小提琴。如果要调整输出窗口的宽度，文本

hhhh…

将在某个点移动到下一行，而只需将几个字符移动到下一行就足够了。问题是将整个文本部分移到下一行会留下大量空白

html:

.box span{空白：预包装；
空白：-moz预包装！重要；
空白：-webkit预包装；
空白：-预包装；
空白：-o形预包装；
空白：预包装；
单词包装：打断单词；
单词break：打破一切；
空白：正常；}

正文
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh

您想要的输出是什么？即使您对span而不是父div应用了

换行符

，行为也不会改变（至少通过我在基于Chromium的浏览器中的测试是这样的。）我的猜测-不明确可能；如果浏览器必须处理这种“动态”的情况，它可能只会为浏览器创建许多catch 22情况。根据实际的用例（？），也许像自动断字这样的东西可以更好地为您服务。@Viira，我想避免空白。哦。非常完美。非常感谢。

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

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