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

Question

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

Here就是fiddle。如果您要调整输出 window 的宽度，文本 HHHHH... 将在某个时候移动到下一行，而只需将几个字符移动到下一行就足够了。问题是将整个文本部分移动到下一行会留下很多空白 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>

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

Move text in span to the next line only partially

html

css

text

line

word-wrap