CSS-обертка слов в div

У меня есть div с шириной 250 пикселей. Когда внутренний текст шире, чем я хочу, чтобы он сломался. Div - float: left и теперь имеет переполнение. Я хочу, чтобы полоса прокрутки исчезла, используя слово-обертывание. Как я могу достичь этого?

<div id="Treeview">
<div id="HandboekBox">
    <div id="HandboekTitel">
        <asp:Label ID="lblManual" runat="server"></asp:Label>
    </div>
    <div id="HandboekClose">
        <asp:ImageButton ID="btnCloseManual" runat="server" 
            ImageUrl="Graphics/close.png" onclick="btnCloseManual_Click" 
            BorderWidth="0" ToolTip="Sluit handboek" />
    </div>
</div>
<asp:TreeView ID="tvManual" runat="server" RootNodeStyle-CssClass="RootNode">
    <Nodes>

    </Nodes>
</asp:TreeView>
</div>

CSS

#Treeview
{
padding-right: 5px;
width: 250px;
height: 100%;
float: left;
border-right: solid 1px black;
overflow-x: scroll;
}

Ответы

Ответ 1

Как сказал Эндрю, ваш текст должен делать именно это.

Есть один экземпляр, который я могу думать о том, что будет вести себя так, как вы предлагаете, и это значит, что у вас есть свойство whitespace.

Посмотрите, есть ли у вас в CSS что-то еще:

white-space: nowrap

Это приведет к тому, что текст будет продолжен в той же строке, пока не будет прерван разрыв строки.

ОК, мои извинения, не уверены, отредактированы или добавлены пометки после этого (сначала не видно).

Свойство overflow-x является причиной появления полосы прокрутки. Удалите это, и div изменится так, чтобы он содержал весь ваш текст.

Ответ 2

Или просто используйте

word-wrap: break-word;

поддерживается в браузерах IE 5.5+, Firefox 3.5+ и WebKit, таких как Chrome и Safari.

Ответ 3

try white-space:normal; Это переопределит наследование white-space:nowrap;

Ответ 4

Трудно сказать окончательно, не видя, как выглядит визуализированный html, и какие стили применяются к элементам в divview дерева, но то, что сразу бросается в меня, - это

overflow-x: scroll;

Что произойдет, если вы удалите это?

Ответ 5

вы можете использовать:

overflow-x: auto;

Если вы установите "auto" в overflow-x, прокрутка появится только тогда, когда размер самого большого размера будет областью DIV

Ответ 6

Я немного удивлен, что это не просто так. Может ли там существовать еще один элемент внутри div, который имеет ширину, установленную на нечто большее 250?

Ответ 7

Устанавливая только свойства width и float css, вы получите панель обертывания. Следующий пример отлично работает:

<div style="float:left; width: 250px">
Pellentesque feugiat tempor elit. Ut mollis lacinia quam. 
Sed pharetra, augue aliquam   ornare vestibulum, metus massa
laoreet tellus, eget iaculis lacus ipsum et diam. 
</div>

Возможно, есть другие стили, которые изменяют внешний вид?