如何在DIV中包装整个span元素？

Question

我有一个div其中有四个span元素。 最后的span超出了div的宽度，所以它被包装到第二行。

我想将整个span（最后的span）包装到第二行，而不是切断内容。

我试图在div上使用white-space/word-break，但似乎都在div的最终宽度处缩减了跨度的内容。

有人帮我解决了这个问题。

Answer 1

谢谢你们， 是的，我在jsfiddle中创建了演示并发现了它。 请参阅以下内容：

http://jsfiddle.net/r7vs7hng/4/

<div style='border: #c0c0c0 1px solid; line-height: 40px; background-repeat: no-repeat;width:450px;'> 
    <div class='secondmenubar'><img style='vertical-align: middle' alt='' width='25' height='25' src=''/><div style='display: inline; margin-left: 5px; vertical-align: middle'>button1</div></div> 

    <div class='secondmenubar'><img style='vertical-align: middle' alt='' width='25' height='25' src=''/><div style='display: inline; margin-left: 5px; vertical-align: middle'>button2</div></div> 

    <div class='secondmenubar'><img style='vertical-align: middle' alt='' width='25' height='25' src=''/><div style='display: inline; margin-left: 5px; vertical-align: middle'>button3</div></div> 

    <div class='secondmenubar'><div style='display: inline; '><img style='vertical-align: middle' alt='' width='25' height='25' src=''/><div style='display: inline; margin-left: 5px; vertical-align: middle'>button4</div></div></div> 

    <div class='secondmenubar'><img style='vertical-align: middle' alt='' width='25' height='25' src=''/><div style='display: inline; margin-left: 5px; vertical-align: middle'>button5</div></div> 

    <div class='secondmenubar'><img style='vertical-align: middle' alt='' width='25' height='25' src=''/><div style='display: inline; margin-left: 5px; vertical-align: middle'>button6</div></div> 

    <div class='secondmenubar'><span style='display:inline-block;' title='used as kendo icon' class='k-icon k-i-close' >1234</span><div style='display: inline;'>button7</div></div> 

    <div class='secondmenubar'><img style='vertical-align: middle' alt='' width='25' height='25' src=''/><div style='display: inline; margin-left: 5px; vertical-align: middle'>button8</div></div> 

    </div> 

我发现了3点：

1. 外面的div需要标记为inline-block的，而不是内联;

2. 如果你有一个像div内的内联元素，你可以将它标记为dislay：inline-block;

3. 如果您使用此跨度为kendoUI按钮，你需要用它之外的inline-block的元素。（这里挡我者）