CSS word-wrapping в div

у меня есть div с шириной 250px. Когда внутренний текст шире, чем это, я хочу, чтобы он сломался. 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;
}
7 86
html css word-wrap

7 ответов:

Как сказал Андрей, ваш текст должен быть делать это.

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

смотрите, если у вас нет следующего в вашем CSS где-то:

white-space: nowrap

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

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

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

93

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

word-wrap: break-word;

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

98

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

12

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

overflow-x: scroll;

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

6

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

overflow-x: auto;

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

3

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

2

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

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

1