如何在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的元素。（這裏擋我者）