仅将 span 中的文本部分移动到下一行答案

【问题标题】：Move text in span to the next line only partially仅将 span 中的文本部分移动到下一行
【发布时间】：2018-08-13 11:16:26
【问题描述】：

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

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;    
}

【问题讨论】：

你想要的输出是什么？
即使您将word-wrap 应用于跨度而不是父 div，行为也不会改变（至少通过我在基于 Chromium 的浏览器中的测试）。我的猜测 - 不是明确可能的；如果浏览器必须以“动态”方式处理它，它可能会简单地为浏览器创建许多 catch 22-situations。根据实际用例（？），也许像自动断字这样的东西可以更好地为您服务。
@Viira，我想避免空格。

标签： html css text line word-wrap

【解决方案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>

【讨论】：

哦。非常完美。谢谢。