CSS word-wrapping в div

Question

У меня есть 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; 
} 

Answer 1

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

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

Смотрите, если вы не имеете его в вашем CSS где:

white-space: nowrap 

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

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

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

Answer 2

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

Answer 3

Установка только свойств ширины и поплавка 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> 

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

Answer 4

Это довольно трудно сказать определенно, не видя, что оказанный HTML выглядит и какие стили применяются к элементам внутри TreeView DIV, но дело в том, что выскакивает у меня сразу есть

overflow-x: scroll; 

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

Answer 5

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

overflow-x: auto; 

Если вы установите «Auto» в переливной-х, прокрутка будет появляться только тогда, когда внутренний размер самый большой, что Див площадь

Answer 6

Или просто использовать

word-wrap: break-word; 

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

Answer 7

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