Quebra de texto CSS em div

Eu tenho um div com largura de 250px. Quando o texto interno é mais amplo do que isso, quero que ele se desfaça. O div é float: left e agora tem um overflow. Quero que a barra de rolagem desapareça usando a quebra de linha. Como posso conseguir isso?

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

Como Andrew disse, seu texto deveria fazer exatamente isso.

Há uma instância em que posso pensar que se comportará da maneira que você sugeriu, se você tiver a propriedade de espaço em branco definida.

Veja se você não tem o seguinte em seu CSS em algum lugar:

white-space: nowrap

Isso fará com que o texto continue na mesma linha até ser interrompido por uma quebra de linha.

OK, minhas desculpas, não tenho certeza se editei ou adicionei a marcação depois (não vi a princípio).

A propriedade overflow-x é o que faz com que a barra de rolagem apareça. Remova isso e o div se ajustará tão alto quanto precisa ser para conter todo o seu texto.

Ou simplesmente use

word-wrap: break-word;

compatível com navegadores IE 5.5+, Firefox 3.5+ e WebKit, como Chrome e Safari.

tente white-space:normal;Isto irá substituir a herançawhite-space:nowrap;

É muito difícil dizer definitivamente sem ver a aparência do html renderizado e quais estilos estão sendo aplicados aos elementos dentro do div treeview, mas o que me salta à vista imediatamente é o

overflow-x: scroll;

O que acontece se você remover isso?

você pode usar:

overflow-x: auto; 

Se você definir 'auto' em overflow-x, a rolagem aparecerá apenas quando o tamanho interno for maior que a área DIV

Estou um pouco surpreso por não ser apenas isso. Poderia haver outro elemento dentro do div que tenha uma largura definida para algo maior que 250?

Definir apenas as propriedades css de largura e flutuação obteria um painel envolvente. O exemplo a seguir funciona muito bem:

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

Talvez existam outros estilos que modificam a aparência?

Achei que word-wrap: anywherefuncionou (em oposição ao word-wrap: break-wordmencionado em outra resposta).

Veja também:

O que significa "qualquer lugar" na propriedade css de "quebra de linha"?