word-wrap - HTML标记中断显示：块

Question

我在这里有这个 jsfiddle：http: //jsfiddle.net/sqszH/1/

基本上，我要做的是让 Hello World 文本位于其正下方的“long long long long”文本下方。有没有办法在不改变 HTML 的情况下做到这一点？

因为我在网页上有类似的情况，但我一生都无法弄清楚。这可能也很简单。也许有人可以在这里帮我一把？那将是真棒！

HTML：

<div class="test">
<div class="first-span">first span</div>
    <div class="second-span">some long long long long long long long long long long text<br /><span>Hello World</span></div>
    <br class="clear" />
</div>

CSS：

.test{
    width:100%;
}
.first-span{
    border:1px solid red;
    box-sizing: border-box;
    float: left;
    padding-right: 1em;
}
.second-span{
    box-sizing: border-box;
    border:1px solid blue;
}
.clear
{
 clear: both;   
}

Answer 1

将类的display属性设置为second-spantable

.second-span{
    box-sizing: border-box;
    border:1px solid blue;
    display: table;
}

例子

Answer 2

添加 height: 4em;

.first-span{
    border:1px solid red;
    box-sizing: border-box;
    float: left;
    padding-right: 1em;
    height: 4em;
}

http://jsfiddle.net/sqszH/4/

Answer 3

编辑解决方案，因为我误解了这个问题：

如果您知道第二个跨度 div 的宽度，请将其也向左浮动。然后你会在 loooong 文本下看到“hellow world”文本。

如果没有，您可以选择设置拳头跨度的高度（如前所述）或更改 html。