Menu
I have two floated divs, side by side, with p tags inside. The text within the p tags does not wrap and just overflows the container, as you can see in the text under the images:
My HTML looks like so:
<div class="submenu"> <h3>Destinations in Europe</h3> <ul> <li><a href="#">dfgdgdgfgdg</a></li> <li><a href="#">dfgdgdgfgdg</a></li> <li><a href="#">dfgdgdgfgdg</a></li> <li><a href="#">dfgdgdgfgdg</a></li> </ul> <h3>Features</h3> <div> <img src="/assets/images/o/menu/city-feat-one.jpg" /> <h4>blahblah</h4> <p> khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhljhiououhljhiououhljhiououhljhiououhljhiououhl </p> </div> <div> <img src="/assets/images/o/menu/city-feat-two.jpg" /> <h4>blahblah</h4> <p> khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhl </p> </div> </div> My CSS:
#rb-menu-com li .submenu > div { width:48%; float:left; position: relative; } #rb-menu-com li .submenu div p { color:#fff; margin: 0; padding:0; width:100%; position: relative; } #rb-menu-com li .submenu div img { border:1px solid #fff; } Has anyone experienced this before? I haven't!! Driving me mad!
283
It is used to display code blocks since it preserves spaces and line breaks. If the line is large, then the <pre> tag won't wrap it by default. To wrap it, we need to use CSS. You can try to run the following code to learn about the usage of <pre> tag and how we can wrap text in HTML using CSS.
Another reason why text may not wrap correctly is due to HTML/CSS code that has been written to force no text wrapping. For example, if you look at the HTML View of the content: You may see something like "white-space: pre" or "text-wrap: none". This will force the browser to not wrap the text.
You can force long (unbroken) text to wrap in a new line by specifying break-word with the word-wrap property. For example, you can use it to prevent text extending out the box and breaking the layout. This commonly happens when you have a long URL in the sidebar or comment list.
Almost all text (tables and headers being exceptions) will need to be wrapped in p tags to display correctly. This includes inside li and dd tags. To be clear, each paragraph in text should be wrapped in its own set of p tags.
Give this style to the <p> tag.
p { word-break: break-all; white-space: normal; } 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
