Preventing line breaks in elements
A developer shares a technical solution for preventing awkward line breaks in website text and code snippets using non-breaking spaces and CSS. The approach involves automating the application of a 'nowrap' class to short code elements containing specific characters.
Why it matters
Improving typography and readability in technical documentation enhances the user experience for developers and readers alike.
One of my favourite tiny details in this website is my non-breaking spaces . I have code that looks for phrases like “5 cm”, “New York”, or “Objective‑C”, and inserts a non-breaking space/hyphen so they’ll never be split across multiple lines.
This is the sort of typographical nicety that would be handled by a professional typesetter if I was writing a printed book with a fixed layout, but that’s not how websites work. My website is viewed at lots of different sizes, and browsers choose where to insert line breaks. I add these non-breaking characters so browsers know to avoid awkward line breaks.
Previously I was only applying this detail to body text, but today I implemented something similar for <code> elements.
Get smarter about the news
Sign up free for a feed built around what you actually care about, Dive Deeper research on any story, and the full text of every article.
Create free accountAlready have an account? Sign in