mozilla

Revision 24554 of word-spacing

  • Revision slug: CSS/word-spacing
  • Revision title: word-spacing
  • Revision id: 24554
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 5 words removed

Revision Content

{{ CSSRef() }}

Summary

The word-spacing CSS property specifies spacing behavior between tags and words.

<style type="text/css"></style>
  • {{ Xref_cssinitial() }}: {{ Cssxref("normal") }}
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: yes
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: for normal the value 0; otherwise the absolute length

Syntax

word-spacing:  normal | <length>

Values

normal
The normal inter-word space, as defined by the current font and/or the browser.
<length>
See {{ Xref_csslength() }} value for possible units.

Examples

The following CSS code:

#mozdiv1 {
    word-spacing: 15px;
}

#mozdiv2 {
    word-spacing: 5em;
}

will style two {{ HTMLElement("div") }} tags containing text as shown here:

example.png

Specifications

Browser compatibility

Browser Lowest Version
Internet Explorer 6.0
Firefox (Gecko) 1.0 (1.0)
Opera 3.5
Safari (WebKit) 1.0 (85)

See also

{{ CSS_Reference:Text() }}

{{ languages( {"pl": "pl/CSS/word-spacing", "fr": "fr/CSS/word-spacing" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary" name="Summary">Summary</h2>
<p>The<code> word-spacing </code>CSS property specifies spacing behavior between tags and words.</p>
<nobr>
<style type="text/css"><![CDATA[.cssprop {
  display:table;
  padding: 0.4em;
  border-left:0.15em solid;
  background-color:#eeeeff
}
.cssprop li {
 display:table-row;
 padding: 3px;
 margin:0;
}
.cssprop li dfn {
  display:table-cell;
  padding: 0 5px;
  border-bottom: none;
  cursor:inherit;
}

]]></style>
<ul class="cssprop"> <li><dfn>{{ Xref_cssinitial() }}:</dfn> {{ Cssxref("normal") }}</li> <li><dfn>Applies to:</dfn> all elements</li> <li><dfn>{{ Xref_cssinherited() }}:</dfn> yes</li> <li><dfn>Media:</dfn> {{ Xref_cssvisual() }}</li> <li><dfn>{{ Xref_csscomputed() }}:</dfn> for<code> normal </code>the value<code> 0</code>; otherwise the absolute length</li>
</ul>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="eval">word-spacing:  normal | &lt;length&gt;
</pre>
<h3 id="Values" name="Values">Values</h3>
<dl> <dt><code>normal</code></dt> <dd>The normal inter-word space, as defined by the current font and/or the browser.</dd> <dt><code>&lt;length&gt;</code></dt> <dd>See {{ Xref_csslength() }} value for possible units.</dd>
</dl>
<h3 id="Examples" name="Examples">Examples</h3>
<p>The following CSS code:</p>
<pre class="brush: css"><span class="css-identifier">#mozdiv1 </span><span class="css-punctuation">{</span>
<span class="whitespace">    </span><span class="css-identifier">word-spacing</span><span class="css-punctuation">: </span><span class="css-unit">15px</span><span class="css-punctuation">;</span>
<span class="css-punctuation">}</span>

<span class="css-identifier">#mozdiv2 </span><span class="css-punctuation">{</span>
<span class="whitespace">    </span><span class="css-identifier">word-spacing</span><span class="css-punctuation">: </span><span class="css-unit">5em</span><span class="css-punctuation">;</span>
<span class="css-punctuation">}</span>
</pre>
<p><span class="css-punctuation">will style two {{ HTMLElement("div") }} tags containing text as shown here:</span></p>
<p><img alt="example.png" class="internal default" src="/@api/deki/files/6103/=example.png"></p>
<h3 id="Specifications" name="Specifications">Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS21/text.html#propdef-word-spacing">CSS 2.1 Text #word-spacing</a></li>
</ul>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> </tr> <tr> <td>Internet Explorer</td> <td><strong>6.0</strong></td> </tr> <tr> <td>Firefox (Gecko)</td> <td><strong>1.0</strong> (1.0)</td> </tr> <tr> <td>Opera</td> <td><strong>3.5</strong></td> </tr> <tr> <td>Safari (WebKit)</td> <td><strong>1.0</strong> (85)</td> </tr> </tbody>
</table>
<h2 id="See_also">See also</h2>
<p>{{ CSS_Reference:Text() }}</p>
<p>{{ languages( {"pl": "pl/CSS/word-spacing", "fr": "fr/CSS/word-spacing" } ) }}</p></nobr>
Revert to this revision