text-overflow

  • Revision slug: CSS/text-overflow
  • Revision title: text-overflow
  • Revision id: 25046
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment removed URL to non-functional page; 5 words added, 17 words removed

Revision Content

{{ CSSRef() }}

Summary

{{ unimplemented_inline() }} in Gecko (Firefox), {{ Bug("312156") }}.

The text-overflow CSS property determines whether an ellipsisdisplays when text content has overflowed its given layout area. To force overflow to occur and ellipses to be applied, the author must apply some additional properties on the element. See example below.

Syntax

text-overflow:  ellipsis | clip

Values

ellipsis
Display ellipsesfor text overflow.
clip
Default value

Example

  p {
      white-space: nowrap;
      width: 100%;                   /* IE6 needs any width */
      overflow: hidden;              /* "overflow" value must be different from "visible" */ 

      -o-text-overflow: ellipsis;    /* Opera */
      text-overflow:    ellipsis;    /* IE, Safari (WebKit) */
   }

Specifications

The specification of text-overflow is incomplete.

Browser compatibility

Browser Lowest Version Support of
Internet Explorer 6.0 text-overflow
Firefox (Gecko) --- ---
Opera 9.0 -o-text-overflow
Safari (WebKit) 1.3 (312.3) text-overflow

IE8 introduced -ms-text-overflow, synonymous with text-overflow. Don't use the -ms- prefix.

Firefox can emulate this behavior using the {{ cssxref("-moz-binding") }} CSS property.

Revision Source

<p>{{ CSSRef() }}</p>
<h3 name="Summary">Summary</h3>
<p>{{ unimplemented_inline() }} in Gecko (Firefox), {{ Bug("312156") }}.</p>
<p>The<code> text-overflow </code>CSS property determines whether an ellipsis<strong> … </strong>displays when text content has overflowed its given layout area. To force overflow to occur and ellipses to be applied, the author must apply some additional properties on the element. See example below.</p>
<h3 name="Syntax">Syntax</h3>
<pre class="eval">text-overflow:  ellipsis | clip</pre>
<h3 name="Values">Values</h3>
<dl> <dt>ellipsis</dt> <dd>Display ellipses<strong> … </strong>for text overflow.</dd> <dt>clip</dt> <dd>Default value</dd>
</dl>
<h3 name="Mozilla_Extensions">Example</h3>
<pre class="eval">  p {
      white-space: nowrap;
      width: 100%;                   /* IE6 needs any width */
      overflow: hidden;              /* "overflow" value must be different from "visible" */ 

      -o-text-overflow: ellipsis;    /* Opera */
      text-overflow:    ellipsis;    /* IE, Safari (WebKit) */
   }</pre>
<h3 name="Specifications">Specifications</h3>
<p>The specification of<code> text-overflow </code>is incomplete.</p>
<ul> <li><a class="external" href="http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-overflow-props" title="http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-overflow-props">CSS 3 Text Candidate Recommendation 2003-05-14 </a> This document defines<code> text-overflow</code>, but it's out of date.</li> <li><a class="external" href="http://www.w3.org/TR/css3-text/" title="http://www.w3.org/TR/css3-text/">CSS 3 Text</a> Latest working draft, currently without<code> text-overflow</code>.</li> <li><a class="external" href="http://dev.w3.org/csswg/css3-text/#text-overflow" title="http://dev.w3.org/csswg/css3-text/#text-overflow">CSS 3 Text #text-overflow</a> Editor's work in progress.</li>
</ul>
<h3 name="Browser_compatibility">Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> <th>Support of</th> </tr> <tr> <td>Internet Explorer</td> <td><strong>6.0</strong></td> <td><code>text-overflow</code></td> </tr> <tr> <td>Firefox (Gecko)</td> <td>---</td> <td>---</td> </tr> <tr> <td>Opera</td> <td><strong>9.0</strong></td> <td><code>-o-text-overflow</code></td> </tr> <tr> <td>Safari (WebKit)</td> <td><strong>1.3</strong> (312.3)</td> <td><code>text-overflow</code></td> </tr> </tbody>
</table>
<p>IE8 introduced<code> -ms-text-overflow, </code>synonymous with<code> text-overflow</code>. Don't use the <code>-ms-</code> prefix.</p>
<p>Firefox can emulate this behavior using the {{ cssxref("-moz-binding") }} CSS property.</p>
Revert to this revision