Zawijanie słów CSS w div

Mam element div o szerokości 250 pikseli. Kiedy tekst wewnętrzny jest szerszy, chcę, żeby się rozpadł. Element div to float: left i ma teraz przepełnienie. Chcę, aby pasek przewijania zniknął za pomocą zawijania słów. Jak mogę to osiągnąć?

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

Jak powiedział Andrew, twój tekst powinien właśnie to robić.

Jest jeden przypadek, o którym myślę, że będzie zachowywał się w sposób, który sugerujesz, a jest to sytuacja, w której ustawiono właściwość białych znaków.

Sprawdź, czy nie masz gdzieś w swoim CSS:

white-space: nowrap

Spowoduje to, że tekst będzie kontynuowany w tej samej linii, dopóki nie zostanie przerwany przez podział wiersza.

OK, przepraszam, nie jestem pewien, czy później edytowałem lub dodałem narzut (na początku go nie widziałem).

Właściwość overflow-x powoduje wyświetlenie paska przewijania. Usuń to, a element DIV dostosuje się tak wysoko, jak to konieczne, aby zawierał cały tekst.

Lub po prostu użyj

word-wrap: break-word;

obsługiwane w przeglądarkach IE 5.5+, Firefox 3.5+ i WebKit, takich jak Chrome i Safari.

try white-space:normal;Spowoduje to zastąpienie dziedziczeniawhite-space:nowrap;

Trudno powiedzieć definitywnie bez sprawdzenia, jak wygląda wyrenderowany kod HTML i jakie style są stosowane do elementów w elemencie div treeview, ale od razu rzuca mi się w oczy

overflow-x: scroll;

Co się stanie, jeśli to usuniesz?

możesz użyć:

overflow-x: auto; 

Jeśli ustawisz „auto” w overflow-x, przewijanie pojawi się tylko wtedy, gdy rozmiar wewnętrzny jest największy niż obszar DIV

Jestem trochę zaskoczony, że nie tylko to robi. Czy może istnieć inny element wewnątrz elementu div, którego szerokość jest większa niż 250?

Ustawienie tylko właściwości width i float css spowodowałoby pojawienie się panelu zawijania. Poniższy przykład działa dobrze:

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

Może istnieją inne style, które modyfikują wygląd?

Okazało się, że word-wrap: anywherezadziałało (w przeciwieństwie do word-wrap: break-wordwspomnianego w innej odpowiedzi).

Zobacz też:

Co oznacza „gdziekolwiek” we właściwości CSS „zawijania słów”?