Перенос слов CSS в div

Question 1

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

Question 2

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

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

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

white-space: nowrap

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

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

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

Question 3

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

word-wrap: break-word;

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

Question 4

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

Question 5

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

overflow-x: scroll;

Что будет, если это убрать?

Question 6

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

overflow-x: auto;

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

Question 7

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

Question 8

Установка только свойств CSS width и float даст панель обертывания. Следующий пример отлично работает:

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

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

Question 9

Я обнаружил, что это word-wrap: anywhereсработало (в отличие от word-wrap: break-wordупомянутого в другом ответе).

Смотрите также:

Что означает "в любом месте" в свойстве css "перенос по словам"?