Uploaded November 2019 | Updated September 2026, 2 weeks ago
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 Miriam Suzanne will walk you through the options we have, and how to use them.
- MDN Overflow-Wrap: developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
- MDN Hyphens: developer.mozilla.org/en-US/docs/Web/CSS/hyphens
- CodePen Demo: codepen.io/mirisuzanne/pen/GRKoxXY
#webdesign #CSS #graphicdesign
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 Miriam Suzanne will walk you through the options we have, and how to use them.
- MDN Overflow-Wrap: developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
- MDN Hyphens: developer.mozilla.org/en-US/docs/Web/CSS/hyphens
- CodePen Demo: codepen.io/mirisuzanne/pen/GRKoxXY
#webdesign #CSS #graphicdesign
