mozilla

Revision 290696 of word-break

  • Revision slug: CSS/word-break
  • Revision title: word-break
  • Revision id: 290696
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

Summary

The word-break CSS property is used to to specify how (or if) to break lines within words.

  • {{ Xref_cssinitial() }}: {{ Cssxref("normal") }}
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: yes
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: specified value

Syntax

Formal grammar:  normal | break-all | keep-all
word-break: normal word-break: break-all word-break: keep-all

Value

normal
Use the default line break rule.
break-all
Word breaks may be inserted between any character for non-CJK (Chinese/Japanese/Korean) text.
keep-all
Don't allow word breaks for CJK text.  Non-CJK text behavior is same as normal.

Examples

Specifications

Specification Status Comment
CSS Text Level 3 {{ Spec2('CSS3 Text') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1 {{ CompatGeckoDesktop("15.0") }} 5.5 {{ CompatNo() }} {{ CompatUnknown() }}
keep-all {{ unimplemented_inline_webkit("43917") }} {{ CompatGeckoDesktop("15.0") }} 5.5 {{ CompatNo() }} {{ unimplemented_inline_webkit("43917") }}
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatGeckoMobile("15.0") }} {{ CompatUnknown() }} {{ CompatNo() }} {{ CompatUnknown() }}
keep-all {{ unimplemented_inline_webkit("43917") }} {{ unimplemented_inline_webkit("43917") }} {{ CompatGeckoMobile("15.0") }} {{ CompatUnknown() }} {{ CompatNo() }} {{ unimplemented_inline_webkit("43917") }}
  • IE8 introduced -ms-word-break as a synonym for word-break. Don't use the -ms- prefix.

See also

  • {{ CSS_Reference:Text() }}

Revision Source

<p>
	{{ CSSRef() }}</p>
<h2 id="
	Summary">
	Summary</h2>
<p>
	The <code>word-break</code> CSS property is used to to specify how (or if) to break lines within words.</p>
<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> specified value</li>
</ul>
<h2 id="
	Syntax">
	Syntax</h2>
<pre class="twopartsyntaxbox">Formal grammar:  normal | break-all | keep-all
</pre>
word-break: normal
word-break: break-all
word-break: keep-all
<pre></pre>
<h2 id="
	Value">
	Value</h2>
<dl>
	<dt>
		<code>normal</code></dt>
	<dd>
		Use the default line break rule.</dd>
	<dt>
		<code>break-all</code></dt>
	<dd>
		Word breaks may be inserted between any character for non-CJK (Chinese/Japanese/Korean) text.</dd>
	<dt>
		<code>keep-all</code></dt>
	<dd>
		Don't allow word breaks for CJK text.  Non-CJK text behavior is same as <code>normal</code>.</dd>
</dl>
<h2 id="
	Examples">
	Examples</h2>
<h2 id="
	Specifications">
	Specifications</h2>
<table class="standard-table">
	<thead>
		<tr style="background-color: rgb(255, 204, 255);">
			<th scope="col">
				Specification</th>
			<th scope="col">
				Status</th>
			<th scope="col">
				Comment</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>
				<a class="external" href="http://dev.w3.org/csswg/css3-text/#word-break" title="http://dev.w3.org/csswg/css3-text/#word-break">CSS Text Level 3</a></td>
			<td>
				{{ Spec2('CSS3 Text') }}</td>
			<td>
				 </td>
		</tr>
	</tbody>
</table>
<h2 id="
	Browser_compatibility">
	Browser compatibility</h2>
<p>
	{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
	<table class="compat-table">
		<tbody>
			<tr>
				<th>
					Feature</th>
				<th>
					Chrome</th>
				<th>
					Firefox (Gecko)</th>
				<th>
					Internet Explorer</th>
				<th>
					Opera</th>
				<th>
					Safari</th>
			</tr>
			<tr>
				<td>
					Basic support</td>
				<td>
					1</td>
				<td>
					{{ CompatGeckoDesktop("15.0") }}</td>
				<td>
					5.5</td>
				<td>
					{{ CompatNo() }}</td>
				<td>
					{{ CompatUnknown() }}</td>
			</tr>
			<tr>
				<td>
					<code>keep-all</code></td>
				<td>
					{{ unimplemented_inline_webkit("43917") }}</td>
				<td>
					{{ CompatGeckoDesktop("15.0") }}</td>
				<td>
					5.5</td>
				<td>
					{{ CompatNo() }}</td>
				<td>
					{{ unimplemented_inline_webkit("43917") }}</td>
			</tr>
		</tbody>
	</table>
</div>
<div id="compat-mobile">
	<table class="compat-table">
		<tbody>
			<tr>
				<th>
					Feature</th>
				<th>
					Android</th>
				<th>
					Chrome for Android</th>
				<th>
					Firefox Mobile (Gecko)</th>
				<th>
					IE Mobile</th>
				<th>
					Opera Mobile</th>
				<th>
					Safari Mobile</th>
			</tr>
			<tr>
				<td>
					Basic support</td>
				<td>
					{{ CompatUnknown() }}</td>
				<td>
					{{ CompatUnknown() }}</td>
				<td>
					{{ CompatGeckoMobile("15.0") }}</td>
				<td>
					{{ CompatUnknown() }}</td>
				<td>
					{{ CompatNo() }}</td>
				<td>
					{{ CompatUnknown() }}</td>
			</tr>
			<tr>
				<td>
					<code>keep-all</code></td>
				<td>
					{{ unimplemented_inline_webkit("43917") }}</td>
				<td>
					{{ unimplemented_inline_webkit("43917") }}</td>
				<td>
					{{ CompatGeckoMobile("15.0") }}</td>
				<td>
					{{ CompatUnknown() }}</td>
				<td>
					{{ CompatNo() }}</td>
				<td>
					{{ unimplemented_inline_webkit("43917") }}</td>
			</tr>
		</tbody>
	</table>
</div>
<ul>
	<li>
		IE8 introduced<code> -ms-word-break </code>as a synonym for<code> word-break</code>. Don't use the <code>-ms-</code> prefix.</li>
</ul>
<h2 id="
	See_also">
	See also</h2>
<ul>
	<li>
		{{ CSS_Reference:Text() }}</li>
</ul>
Revert to this revision