You Don’t Need Word-wrap When Ellipsis Text

word-break can meet all scenarios

Preface

Have you ever meet a similar problem where word are split when text needs to be truncated:

demo of word break

When we use word-break:break-all will occur this problem, we can fixed it by replacing word-break:break-all with word-wrap:break-word :

Are you confused and want to know what is the difference between word-break and word-wrap?

What is word-wrap

word-wrap specifies whether or not the browser should insert line breaks within words to prevent text from overflowing its content box. It was originally a nonstandard and unprefixed Microsoft extension, and was implemented by most browsers. It has been renamed to overflow-wrap in CSS3. According to the CSS3 specification, browsers should treat word-wrap as a legacy name alias of the overflow-wrap property for compatibility.

Below art the values of the word-wrap property(from: CSS word-wrap property (w3schools.com)):

1. normal: default value, break words only at allowed break points.
2. break-word: allows unbreakable words to be broken.

the behavior of word-wrap

What is word-break

word-break specifies whether or not the browser should insert line breaks wherever the text would otherwise overflow its content box. It’s basically the same as word-wrap , but supports more values (from CSS word-break property (w3schools.com)):

1. normal: default value. uses default line break rules
2. break-all: to prevent overflow, word may be broken at any character
3. keep-all: word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as value normal
4. break-word: to prevent overflow, word may be broken at arbitrary points

The normal and keep-all have some difference in CJK characters. The break-all and break-word behave same for CJK characters, but differ from Non-CJK word.

The word-break: break-word is same as word-wrap:break-word :

So we don’t need word-wrap, using word-break can meet all requirements.

Conclusion

word-break:break-word is supported in modern browsers, so you don’t need word-wrap:break-word any more. And I found that Medium is using word-break to break word in the list page while truncating text.

Thanks for reading, hope it helps you write more understandable code.

References

1. CSS word-wrap property (w3schools.com)
2. CSS word-break property (w3schools.com)
3. Demo from word-break — CSS: Cascading Style Sheets | MDN (mozilla.org) , and you can test on word-break & word-wrap (codepen.io)