word-spacing

The word-spacing property is similar to letter-spacing, though naturally its use governs the amount of space between the words in a piece of text, not the individual characters.

p {
    word-spacing: 2em;
}

word-spacing can receive three different values:

  1. the “normal” keyword, which resets the default spacing
  2. length values using any CSS units (most commonly px, em, rem)
  3. the “inherit” keyword, which applies the word-spacing of the parent element

Best practice at this time would be to use em. Font size can be adjusted, so using pixels for this could cause problems at the spacing between words wouldn't scale as their size did. rem is great usually, but browser support is lower and in this use case it's probably best the spacing is relevant directly to the words it is being applied to, not the root.

It is important to note that “word” in this context actually refers a singular piece of inline content—which means that word-spacing affects inline-block elements as well as inline elements. In this example, several such elements are spaced by setting the word-spacing of their parent container:

Check out this Pen!

Points of Interest

  • The word-spacing property is animatable with CSS Transitions.
  • While use of the “percentage” value to determine spacing is permitted as per the spec, it can yield unpredictable results — often simply no effect at all.
  • Setting white-space to zero is one of the ways to fight against the space between inline block elements.

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Works Works Works Works Works Most Works

A note on Android browser support: The vast majority of Android devices support word-spacing—however, some devices using non-Apple builds of Webkit or the Netfront browser do not. The specifics are detailed in the QuirksMode link above.

Comments

  1. User Avatar
    James Steinbach
    Permalink to comment#

    I’m noticing a problem with attempting to center a headline with word-spacing.

    text-align: center;
    padding: 1em 0;
    margin: .5em auto 0;
     width: 100%;
    word-spacing: 5em;
    

    In FF, this behaves as expected: literal centering with a large gap between words. In Chrome, it appears to apply the spacing to the front of the first word, forcing the text to push out the right side of the box. In Safari, it appears to ignore text-align: center completely.

    All screenshots from current browser versions on OS X (10.8.4). Is there a work-around for this inconsistency or do I have to settle for fixing this with manual spacing?

    screen capture windows

  2. User Avatar
    Pascal Lorenz

    Setting word-spacing to zero to remove the space between inline-block elements did not have any effect for me. Any other value than zero worked. So I tried to find out which negative em value I needed to use.

    Looks like -0.25em removes the standard whitespace between blocks.

  3. User Avatar
    Arioman
    Permalink to comment#

    cool thanks , but is there any chance to increase space between letters , not word ?

  4. User Avatar
    Kevin

    “This value indicates inter-word space in addition to the default space between words. Values may be negative, but there may be implementation-specific limits.”

    http://www.w3.org/wiki/CSS/Properties/word-spacing

    • User Avatar
      Lei
      Permalink to comment#

      Agreed. And actually the default (or normal) word spacing is 0.25em (http://webtypography.net/2.1.1). I tested it with major browsers (Chrome/Firefox/Safari/IE) they all have 0.25em defaults. If you set word-spacing to -0.25em, the result is no space between words (all words concats together). If you set it less than that like -1em, most browsers would overlap words, except IE (I tested on 11) which would keep no spacing instead of overlapping.

  5. User Avatar
    something

    function dsd(){
    jdflksdlf.slkfjsdi = ” nothing “;
    }

  6. User Avatar
    v
    Permalink to comment#

    On my firefox it seems excess negative word-spacing does not make inline-blocks to overlap (it still makes words overlap). If this works in most browsers, it is the best

  7. User Avatar
    Kiruna

    Hi.I have a nav menu. how i can remove spece between “About us” if i set a word-spacing: 2em? i want 2em distance between words contact and about, not between About and us. Thanks

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag