Prevent Wrapping of <code> Tags in Text

By  on  

Writers of technical documentation (or lowly blog writers like myself) oftentimes put property names in <code> tags within blocks of text. Doing so makes reading the text easier and prevents users from misconstruing explanatory text with property names. CSS uses a dash within its property and value names and English uses dashes to signal a place where the line could break the text...see the problem here? The contents of your <code> tag could wrap and that can be unsightly. To prevent that smudge in your otherwise flawless writing, you can use white-space: nowrap:

code {
    white-space: nowrap;
}

The only downside of modifying white-space is that the code could flow well out of its container if the code text is lengthy. I would contend that length property names would be best placed on their own line (in their own block) but that issue is one to keep in mind. You could use text-overflow: ellipsis and a max-width to temper the element width, but the text could then lose its meaning.

It's up to you to decided if this could be safe for your own use. I just think it's a nice little addition to keep your content from breaking in ways you haven't thought of!

Recent Features

  • By
    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API...

  • By
    5 Awesome New Mozilla Technologies You&#8217;ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

Incredible Demos

  • By
    Create a 3D Panorama Image with A-Frame

    In the five years I've been at Mozilla I've seen some awesome projects.  Some of them very popular, some of them very niche, but none of them has inspired me the way the MozVR team's work with WebVR and A-Frame project have. A-Frame is a community project...

  • By
    Translate Content with the Google Translate API and JavaScript

    Note:  For this tutorial, I'm using version1 of the Google Translate API.  A newer REST-based version is available. In an ideal world, all websites would have a feature that allowed the user to translate a website into their native language (or even more ideally, translation would be...

Discussion

  1. As an in between step or when modifying white-space is unwanted, you could use “‑” to show a dash but not break on it.

  2. Little late to the game here but…

    That’s an interesting problem you bring up at the end there. It is rare to have an inline code tag break out of its container, but there is a way around it. Here it is:

    http://jsbin.com/UQUfuXUX/1/edit

    Two things to note:

    – I’m using a non-breaking hyphen character, inserted with its decimal notation.
    – I’ve added word-wrap: break-word in the CSS to prevent long lines from breaking the container.

    Truthfully, it’s not an ideal solution to do this solely on the front-end. Preferrably you would have some sort of back-end function that automatically replaces hyphens inside of ‘code’ tags with the non-breaking hyphen character.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!