Menu
I want to wrap the words automatically within width.
<ul class="dropdown-menu" style="width:298px;margin:15px 0 0 0;">
<li>option 1 </li>
<li>option 2 option 2 option 2 option 2 option 2 option 2</li>
</ul>
It's now working fine with white-space:normal
ul li{
white-space:normal;
}
753
Today I'm going to talk about a rarely used but extremely useful CSS property, the word-wrap. You can force long (unbroken) text to wrap in a new line by specifying break-word with the word-wrap property.
The word-break property in CSS is used to specify how a word should be broken or split when reaching the end of a line. The word-wrap property is used to split/break long words and wrap them into the next line. word-break: break-all; It is used to break the words at any character to prevent overflow.
The overflowing word that is otherwise unbreakable is broken into chunks of text using overflow-wrap: anywhere so that it fits in its container. It's important to note that anywhere is not yet supported by some browsers.
Please Try it...
ul li {
word-break: break-all;
}
Add white-space:normal to your CSS element:
word-break: normal;
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
