Home  »  Code Snippets   »   css wrap text to next line

CSS doesn’t make text go on a new line?

If you have a fixed-width div that contains text that is longer than the div, Adding a long string of letters will not wrap since their part of the single letter word. There is more than one solution to this problem So let’s check it out.

Use Cases:

This does not happen often and can be seen in large spellings or text URLs. Here is a case that demonstrates the problem.

<div class="box">
Pneumonoultramicroscopicsilicovolcanoconiosis	
Supercalifragilisticexpialidocious	
Pseudopseudohypoparathyroidism	
https://en.wikipedia.org/wiki/Longest_word_in_English
</div>

Css to style the box:

.box{
width:300px; 
border:2px solid red; 
margin:10px;
}

The output:

Edit Example

Problem: Overflowing text.

Solutions:

With white-space:

.box{
white-space: initial;
}

Edit Example

With overflow-wrap:

.box{
overflow-wrap: break-word;
}

Edit Example

With word-break:

.code{
word-break: break-all;
}

Edit Example

With hyphens:

.code{
hyphens: auto;
}

Edit Example

 

Similar Tags:

+ more tags