CSS word-wrapping in div

Question

I have a div with a width of 250px. When the innertext is wider than that i want it to break down. The div is float: left and now has an overflow. I want the scrollbar to go away by using word-wrapping. How can i achieve this?

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

Jayx · Accepted Answer · 2009-02-02T08:29:44.873

114

As Andrew said, your text should be doing just that.

There is one instance that I can think of that will behave in the manner you suggest, and that is if you have the whitespace property set.

See if you don't have the following in your CSS somewhere:

white-space: nowrap

That will cause text to continue on the same line until interrupted by a line break.

OK, my apologies, not sure if edited or added the mark-up afterwards (didn't see it at first).

The overflow-x property is what's causing the scroll bar to appear. Remove that and the div will adjust to as high as it needs to be to contain all your text.

edited Feb 02 '09 at 08:29

answered Feb 02 '09 at 08:24

Jayx

3,896
3
27
37

You're right. The treeview is build by Microsoft and when i check the source, everywhere white-space: nowrap is used – Martijn Feb 02 '09 at 08:31
Ah, good. PhoneGap + jquery mobile results in a lot of style to sort through. By adding "white-space: normal; overflow: auto;" that's sorted me out. – Michael Blankenship Jul 19 '15 at 19:16
3

try `white-space:normal;` on your element to override inheriting `white-space: nowrap` from its parent – gordon Mar 29 '17 at 20:04

score 105 · Answer 2 · edited Dec 06 '11 at 22:11

105

Or simply use

word-wrap: break-word;

supported in IE 5.5+, Firefox 3.5+, and WebKit browsers such as Chrome and Safari.

edited Dec 06 '11 at 22:11

arcain

14,920
6
55
75

answered Dec 06 '11 at 19:16

Jc Figueroa

1,191
1
7
5

score 22 · Answer 3 · answered Mar 29 '17 at 20:01

22

try white-space:normal; This will override inheriting white-space:nowrap;

answered Mar 29 '17 at 20:01

gordon

1,152
1
12
18

score 8 · Answer 4 · answered Feb 02 '09 at 08:27

8

It's pretty hard to say definitively without seeing what the rendered html looks like and what styles are being applied to the elements within the treeview div, but the thing that jumps out at me right away is the

overflow-x: scroll;

What happens if you remove that?

answered Feb 02 '09 at 08:27

Andrew

1,251
6
17

Then the text goes over the borderline – Martijn Feb 02 '09 at 08:32

score 3 · Answer 5 · edited Nov 02 '13 at 16:54

3

you can use:

overflow-x: auto;

If you set 'auto' in overflow-x, scroll will appear only when inner size is biggest that DIV area

edited Nov 02 '13 at 16:54

Tamil Selvan C

19,913
12
49
70

answered Mar 04 '09 at 19:51

score 2 · Answer 6 · answered Feb 02 '09 at 08:14

2

I'm a little surprised it doesn't just do that. Could there another element inside the div that has a width set to something greater than 250?

answered Feb 02 '09 at 08:14

Andrew

1,251
6
17

score 1 · Answer 7 · answered Feb 02 '09 at 08:17

1

Setting just the width and float css properties would get a wrapping panel. The folowing example work just fine:

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

Maybe there are other styles in place that modify the appearance?

answered Feb 02 '09 at 08:17

Aleris

7,981
3
36
42

It doesn't work. In my div i use hyperlinks. Maybe that has something to do with it? – Martijn Feb 02 '09 at 08:19

score 0 · Answer 8 · answered Sep 26 '19 at 05:21

0

I found that word-wrap: anywhere worked (as opposed to word-wrap: break-word mentioned in another answer).

CSS word-wrapping in div

8 Answers8

Linked