Menu
I have the folowing html:
<div class="box">
long text here
</div>
and css:
.box {
width: 400px;
height: 100px;
overflow: auto;
border: 1px gold solid;
}
I want only a vertical scroll. But when a word is too long, a horizontal scroll is displayed. How do I make the long words wrap ?
If needed, I can use a trick with jQuery or PHP, but I would like to solve it using CSS, because it's CSS job.
You can fiddle here: http://jsfiddle.net/879bc/1/
520
To hide the horizontal scrollbar and prevent horizontal scrolling, use overflow-x: hidden: HTML. CSS.
break-word: This is the actual CSS syntax that tells the browser to wrap a long text over to a new line. normal: It breaks each word at the normal points of separation within a DOM. It doesn't have effect on long strings. initial: It's the default browser's way of handling strings.
Breaking long words The word-wrap property is now treated by browsers as an alias of the standard property. An alternative property to try is word-break . This property will break the word at the point it overflows.
word-wrap: break-word
https://developer.mozilla.org/en/CSS/word-wrap
52
For custom word breaking, there is an html special character that is not so often used- ­ (soft hyphen) - that will split words on 2 lines and insert a dash after the first part of the word if the word approaches the edge of its container. Trouble is, you'll have to place them everywhere you want them. As you say, though, you can also set up a js or php function, and insert them into the appropriate places.
32
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
