Using a non-breaking space ( ) instead of a regular space (space bar) to keep words next to each other and to avoid widows.

almost 7 years ago from , UI/UX Designer and Front-End Developer

<p>Designer&nbsp;News</p> // Will always be on one line

Designer News

<p>Designer News</p> // Will break if adjusted




  • Alec LomasAlec Lomas, almost 7 years ago

    Typogr can do this for you automatically for you, among other things. There's a Gulp version and, I believe, a Grunt one as well.

    5 points
  • Alan InterfaceAlan Interface, almost 7 years ago

    It is a problem. For some things I'll wrap a name or call-to-action in a span tag with a class that sets white-space:nowrap.

    For headings, you can add an "orphan protection" script that dynamically inserts a nbsp between the last two words.

    It really depends on what you're trying to do? I'm wary of doing too much here, because We need to factor so many different screen sizes etc.

    p.s. I hadn't even heard of en and em spaces in html, thanks Mattan.

    1 point
  • Wes OudshoornWes Oudshoorn, almost 7 years ago

    Another neat trick is playing with tags and media queries. I hate ugly breaking headlines so I sometimes show / hide a tag in a heading to make it pretty on all screen sizes <3

    0 points
  • Mattan IngramMattan Ingram, almost 7 years ago

    Can someone explain the whole text space situation to me?

    So we have non-breaking space reference, en-space, em-space, etc. but we don't have a dedicated HTML reference for a normal space?

    This becomes a problem when developers are using text-editors that strip trailing spaces or treat double spaces as one. You cant use   because it won't wrap properly, and the en-space and em-spaces are not the same size as a normal space.

    So WTF am I supposed to use? The only solution I can find is to use the CSS preserve "white-space" property which works but is awkward and can have other unwanted side-effects.

    0 points
    • Alec LomasAlec Lomas, almost 7 years ago (edited almost 7 years ago )

      &#032; is the HTML entity for a normal-width breaking space, unless I'm misunderstanding what you're looking for.

      1 point
      • Mattan IngramMattan Ingram, almost 7 years ago

        Bahahaha thank you, how did I not find this until now? Every time I googled "HTML space entity" I couldn't find anything except the other ones. Of course if I had just gone to an actual table of entities this is often listed first, I'm a dumbass.

        0 points
        • Alec LomasAlec Lomas, almost 7 years ago

          It's extremely easy to overlook (even in entity tables) on account of it being an invisible character!

          1 point