CSS-перенос слов в div - PullRequest
Новая
       14

CSS-перенос слов в div

96 голосов
/ 02 февраля 2009

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

Ответы [ 7 ]

102 голосов
/ 02 февраля 2009

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

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

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

white-space: nowrap

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

Хорошо, мои извинения, я не уверен, что редактировал или добавил наценку позже (сначала не видел).

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

99 голосов
/ 06 декабря 2011

Или просто используйте 

word-wrap: break-word;

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

16 голосов
/ 29 марта 2017

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

7 голосов
/ 02 февраля 2009

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

overflow-x: scroll;

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

3 голосов
/ 04 марта 2009

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

overflow-x: auto;

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

2 голосов
/ 02 февраля 2009

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

1 голос
/ 02 февраля 2009

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

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

...