Menu
The <wbr> element If you know where you want a long string to break, then it is also possible to insert the HTML <wbr> element. This can be useful in cases such as displaying a long URL on a page.
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.
You can use the word-wrap , overflow-wrap , or word-break CSS properties to wrap or break words that would otherwise overflow their container.
You can use the CSS property word-wrap:break-word;, which will break words if they are too long for your span width.
span {
display:block;
width:150px;
word-wrap:break-word;
}<span>VeryLongLongLongLongLongLongLongLongLongLongLongLongExample</span>Try following css with addition of white-space:
span {
display: block;
word-wrap:break-word;
width: 50px;
white-space: normal
}
Like this
DEMO
li span{
display:block;
width:50px;
word-break:break-all;
}
By default a span is an inline element... so that's not the default behavior.
You can make the span behave that way by adding display: block; to your CSS.
span {
display: block;
width: 100px;
}
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