Menu
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; } 
538
Use word-wrap:break-word; It even works in IE6, which is a pleasant surprise. word-wrap: break-word has been replaced with overflow-wrap: break-word; which works in every modern browser.
If you want to prevent the text from wrapping, you can apply white-space: nowrap; Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on its own line (in the code).
CSS word-wrap property is used to break the long words and wrap onto the next line. This property is used to prevent overflow when an unbreakable string is too long to fit in the containing box.
To fix this problem, avoid using vw for your max-width and use a max-width of 100% instead. This will transfer the width of the parent container to the width of the child container.
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.
142
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
