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


100

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

Ответы:


110

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

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

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

white-space: nowrap

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

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

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


Ты прав. Древовидное представление построено Microsoft, и когда я проверяю исходный код, везде используется white-space: nowrap
Martijn

А, хорошо. PhoneGap + jquery mobile дает много стиля для сортировки. Добавив "пробел: нормальный; переполнение: авто;" это меня разобрало.
Майкл Бланкеншип

2
попробуйте white-space:normal;на своем элементе переопределить наследование white-space: nowrapот его родителя
Гордон

102

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

word-wrap: break-word;

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


19

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


8

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

overflow-x: scroll;

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


Затем текст выходит за границу
Martijn

3

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

overflow-x: auto; 

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


2

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


1

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

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


Не работает. В моем div я использую гиперссылки. Может, это как-то связано?
Martijn

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.