The line wrap algorithm wraps at soft wrap opportunities--breaking characters like spaces and dashes. is a non-breaking space that can't be used to line break.
overflow-wrap
overflow-wrap: break-word gives the browser permission to break after any character.
hyphens: auto adds hyphens at work break points.
- It only works if the
langattribute is set on the<html>tag.
text-overflow: ellipsis
Overflow management occurs after the line-breaking algorithm runs.
- Truncating content requires disabling line-wrapping with
white-space: nowrap.
This snippet produces ellipsis after 250px.
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
max-width: 250px;
Multi-line ellipsis
The following snippet will ellipse a paragraph on the third line.
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
Someday this will be replaced by line-clamp, but it's not quite ready yet.
Additional notes
React Wrap Balancer is a "Simple React Component That Makes Titles More Readable", worth checking out.
Some of this content is based on Josh Comeau's excellent CSS resources.