CSS-обговорення слів у діві

У мене є div з шириною 250px. Коли внутрішній текст ширший, ніж я, я хочу, щоб він руйнувався. Діл float: зліва і тепер має переповнення. Я хочу, щоб смуга прокрутки відійшла, використовуючи обгортання слів. Як я можу цього досягти?

<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;
}

Як сказав Ендрю, ваш текст повинен робити саме це.

Є один екземпляр, який я можу подумати, що він буде вести себе так, як ви пропонуєте, і це якщо у вас встановлено властивість пробілу.

Перевірте, чи у вас десь немає CSS:

white-space: nowrap

Це призведе до продовження тексту на тому ж рядку, поки не перерветься розрив рядка.

Добре, вибачте, не впевнений, редагували чи додавали націнку після цього (спочатку не бачили).

Властивість overflow-x є причиною появи панелі прокрутки. Видаліть це, і div налаштується на максимальну висоту, щоб містити весь текст.

Або просто використовувати

word-wrap: break-word;

підтримується у веб-переглядачах IE 5.5+, Firefox 3.5+ та WebKit, таких як Chrome та Safari.

Спробуйте white-space:normal;це замінить успадкуванняwhite-space:nowrap;

Досить важко сказати остаточно, не бачачи, як виглядає наданий html та які стилі застосовуються до елементів у розділі дерева viewview, але те, що вискакує у мене відразу, це

overflow-x: scroll;

Що станеться, якщо ви видалите це?

Ви можете використовувати:

overflow-x: auto; 

Якщо ви встановите "auto" у "overflow-x", прокрутка з’явиться лише тоді, коли внутрішній розмір найбільший за область DIV

Я трохи здивований, що це не просто так. Чи може бути ще один елемент всередині div, ширина якого встановлена ​​на щось більше, ніж 250?

Визначивши лише ширину та властивості css float, ви отримаєте обгорткову панель. Наступний приклад працює просто чудово:

<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>

Можливо, є інші стилі, які змінюють зовнішній вигляд?

Я виявив, що це word-wrap: anywhereспрацювало (на відміну від word-wrap: break-wordзазначеного в іншій відповіді).

Дивитися також:

Що означає властивість css "скрізь" у будь-якому місці?