Question

我有一个div，里面有四个span个元素。最后一个span位于div的宽度之外，所以它被包装到第二行。

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

我尝试在white-space/word-break上使用div，但似乎所有内容都在div的结束宽度处缩小了范围内容。

任何人都帮我解决了这个问题。

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需要标记为内联块，而不是内联;
如果您在div中有一个内联元素，则可以将其标记为dislay：inline-block;
如果你使用这个span作为kendoUI BUTTON，你需要在它之外包含一个内联块元素。（这阻止我在这里）

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

1 个答案: