How do you wrap long words in CSS?
None of the solutions are perfect, but we have some options
Horizontal text overflow has always been difficult to manage on the web. The default visible overflow is designed to make sure content remains accessible no matter the size of a containing box, but it’s not our only option.
We can now use overflow-wrap to control how words break –
and combine that with hyphens to make wrapped text more readable.
The solutions aren’t perfect yet,
but I’ll walk you through the options we have,
and how to use them.
Overflow-wrap is the proper way to break words in CSS
Resilient Web Training & Consulting
Take full advantage of the universal web, and reduce maintenance over the long term with resilient HTML, CSS, and JS systems. OddBird provides custom consulting and in-depth trainings on front-end architecture and workflow – from advanced HTML/CSS to integrated design systems, component libraries, testing, and documentation.
Contact us for 1-3 day workshops with Miriam Suzanne, or custom web app creation with our team of Python, UX, and front-end experts.
Schedule a call with Miriam