CODEWITHSUNDEEP
htmlcsswhitespace
Ood
Ood

Reputation: 1795

Don't break words at whitespace with CSS

I have a div with a set width. The way text is broken by default is at a white space. Is there any way to set the style of my element, so that the text is broken at any given character to fill out the maximum space available?

Thanks in advance!

enter image description here

Upvotes: 7

Views: 3076

Answers (1)

mayersdesign
mayersdesign

Reputation: 5310

The word-break property in CSS can be used to change when line breaks ought to occur. Normally, line breaks in text can only occur in certain spaces, like when there is a space or a hyphen. But using word-break: break-all we can override that.

As an aside this can be very useful for stopping long urls from breaking out of text containers.

div {
 width: 200px;
 background: pink;
}
    
p {word-break: break-all; }
<div>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis, justo quis mollis volutpat, nibh enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis, justo quis mollis volutpat, nibh enim</p>
</div>

jQuery "alternative"

Plugins including, but not limited to, https://github.com/bramstein/hypher can also be employed and will likely give a nicer overall appearance by using associated dictionaries (language dependent) to hyphenate the words properly when they break.

Upvotes: 7

Related Questions