Skip to main
Video
CSS code snippet with overflow wrap options

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

Recent Videos

  1. Title card from the podcast with headshots of Brad and Mia
    Video post type

    Pottery, Theater, CSS Collaboration, and the Ethics of AI

    Brad chats with Miriam Suzanne about pottery, theater, CSS, and why we shouldn’t just accept AI as the way. Miriam describes their through-line as collaborative creativity across pottery, theater, client work, and CSS standards, arguing process shapes results and that CSS is inherently collaborative with users, browsers, and devices.

    see all Video posts
  2. Video post type

    How to Use CSS Anchor Positioning TODAY

    CSS anchor positioning simplifies popovers and dropdowns, and also unlocks new creative possibilities. James joined Jason to teach and explore anchor positioning in live code.

    see all Video posts
  3. Video post type

    Smashing Hour with Miriam Suzanne

    I joined Geoff Graham for a Smashing live stream to talk about CSS, web standards, music, and more!

    see all Video posts