Don't break words in spaces with CSS

Question

I have a div with a given width. By default, the default text is in white space. Is there a way to set the style of my element so that the text is split on any given character to fill the maximum free space?

Thanks in advance!

Answer 1

The word-break property in CSS can be used to change when line breaks should occur. Typically, line breaks in text can occur only in certain spaces, for example, when there is a space or a hyphen. But using word-break: break-all, we can redefine this.

URL- .

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>

Hide result

jQuery ""

, , , https://github.com/bramstein/hypher, , , , ( ), , .

Answer 2

break-word -: break-all

.your-text {
  word-break: break-word;
  width: 160px;
}

<p class="your-text">Longer-text-just-broken when is necesary example</p>

Hide result

, . CSS HTML.