Как обернуть весь элемент span в DIV?

-1

У меня есть div с четырьмя span элементами внутри него. Последнее span находится за пределами ширины div, поэтому оно переводится во вторую строку.Как обернуть весь элемент span в DIV?

Я хочу обернуть целое span (последние span) во вторую строку, чтобы не отрезать содержимое.

Я попытался использовать white-space/word-break на div, но все, кажется, разрезают содержимое пролета по ширине конца div.

Кто-нибудь поможет мне решить проблему.

источник

2015-04-04 matrix

вы можете добавить код скрипкой? сложно отлаживать код без него – ochi

Вы связываете, чтобы создавать столбцы из элементов span? –

Не могли бы вы показать проблему на http://jsfiddle.net? – Jarod

Спасибо, ребята, Да, я создаю демо в 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 пункт:

Внешний DIV необходимо пометить как встроенный блок, а не встраивать;
Если у вас есть встроенный элемент, как внутри div, вы можете отметить его как dislay: inline-block;
если вы используете этот промежуток как КНОПКА kendoUI, вам нужно обернуть рядный блок элемент вне его. (Это блокирует меня здесь)

источник

2015-04-04 16:28:34 matrix

Как обернуть весь элемент span в DIV?

ответ

Смежные вопросы