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    lt div id  Treeview  gt   lt div id  HandboekBox  gt       lt div id  HandboekTitel  gt           lt asp Label ID  lblManual  runat  server  gt  lt  asp Label gt       lt  div gt       lt div id  HandboekClose  gt           lt asp ImageButton ID  btnCloseManual  runat  server               ImageUrl  Graphics close png  onclick  btnCloseManual Click               BorderWidth  0  ToolTip  Sluit handboek    gt       lt  div gt   lt  div gt   lt asp TreeView ID  tvManual  runat  server  RootNodeStyle-CssClass  RootNode  gt       lt Nodes gt        lt  Nodes gt   lt  asp TreeView gt   lt  div gt    CSS    Treeview   padding-right  5px  width  250px  height  100   float  left  border-right  solid 1px black  overflow-x  scroll

User · Answer

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?

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Or simply use   word-wrap  break-word    supported in IE 5 5   Firefox 3 5   and WebKit browsers such as Chrome and Safari

User · Answer

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

User · Answer

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

User · Answer

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?

User · Answer

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

User · Answer

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

User · Answer

I found that word-wrap  anywhere worked  as opposed to word-wrap  break-word mentioned in another answer    See also   What does  quot anywhere quot  mean in  quot word-wrap quot  css property

User · Answer

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

User · Answer

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?

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Or simply use   word-wrap  break-word    supported in IE 5 5   Firefox 3 5   and WebKit browsers such as Chrome and Safari

User · Answer

I found that word-wrap  anywhere worked  as opposed to word-wrap  break-word mentioned in another answer    See also   What does  quot anywhere quot  mean in  quot word-wrap quot  css property

User · Answer

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?

User · Answer

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

User · Answer

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

[css] CSS word-wrapping in div

Examples related to css

Examples related to html

Examples related to word-wrap