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

Question

我有一个 div，里面有四个 span 元素。最后一个 span 超出了 div 的宽度，因此它被自动换行到第二行。

我想把整个span（最后一个span）包到第二行，不要截断内容

我尝试在 div 上使用 white-space/word-break，但似乎都在 div 的末尾宽度处剪切了 span 的内容。

谁能帮我解决这个问题。

Answer 1

谢谢大家，是的，我在 jsfiddle 中创建了演示并找到了它。请看下面：

<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 个点：

外面div需要标记为inline-block，不是inline；
如果你有一个像 div 里面的内联元素，你可以将它标记为 dislay:inline-block;
如果你使用这个span作为kendoUI BUTTON，你需要在它外面包裹一个inline-block元素。（这块我在这里）

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

How to wrap a whole span element in a DIV?

html

css

layout