Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla

Revision 25054 of text-overflow

  • Revision slug: CSS/text-overflow
  • Revision title: text-overflow
  • Revision id: 25054
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment text-overflow is removed from CSS3-Text; string value removed from CSS3-Basic-User-Interface; 4 words added, 47 words removed

Revision Content

{{ CSSRef() }}{{ unimplemented_header() }}

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 ellipses(U+2026, …) to represent clipped text.
clip
Default value, clips text.

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 9-10 */
      text-overflow:    ellipsis;    /* IE, WebKit (Safari, Chrome), Opera 11 */
   }

Browser compatibility

Browser Lowest version Support of
Internet Explorer 6.0 text-overflow ellipsis | clip
Firefox (Gecko) --- --- ---
Opera (Presto) 9.0 (2.0) -o-text-overflow ellipsis | clip
11.0 (2.7) text-overflow ellipsis | clip
Safari | Chrome | WebKit 1.3 | 1.0 | 312.3 text-overflow ellipsis | clip

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

Specifications

The specification is incomplete.

See also

{{ HTML5ArticleTOC() }}

Revision Source

<p>{{ CSSRef() }}{{ unimplemented_header() }}</p>
<h3>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>Syntax</h3>
<pre class="eval">text-overflow:  ellipsis | clip</pre>
<h3 name="Values">Values</h3>
<dl> <dt>ellipsis</dt> <dd>Display ellipses<strong> … </strong>(U+2026,<code> &amp;hellip;</code>) to represent clipped text.</dd> <dt>clip</dt> <dd>Default value, clips text.</dd>
</dl>
<h3>Example</h3>
<pre class="brush: css">  p {
      white-space: nowrap;
      width: 100%;                   /* IE6 needs any width */
      overflow: hidden;              /* "overflow" value must be different from "visible" */ 

      -o-text-overflow: ellipsis;    /* Opera 9-10 */
      text-overflow:    ellipsis;    /* IE, WebKit (Safari, Chrome), Opera 11 */
   }</pre>
<h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest version</th> <th colspan="2">Support of</th> </tr> <tr> <td>Internet Explorer</td> <td><strong>6.0</strong></td> <td><code>text-overflow</code></td> <td><code>ellipsis | clip</code></td> </tr> <tr> <td>Firefox (Gecko)</td> <td>---</td> <td>---</td> <td>---</td> </tr> <tr> <td rowspan="2">Opera (Presto)</td> <td><strong>9.0</strong> (2.0)</td> <td><code>-o-text-overflow</code></td> <td><code>ellipsis | clip</code></td> </tr> <tr> <td><strong>11.0</strong> (2.7)</td> <td><code>text-overflow</code></td> <td><code>ellipsis | clip</code></td> </tr> <tr> <td>Safari | Chrome | WebKit</td> <td>1.3 | 1.0 | 312.3</td> <td><code>text-overflow</code></td> <td><code>ellipsis | clip</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>
<h3>Specifications</h3>
<p>The specification 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://dev.w3.org/csswg/css3-ui/#text-overflow" title="http://dev.w3.org/csswg/css3-ui/#text-overflow">CSS 3 Basic User Interface #text-overflow</a>  Editor's draft, work in progress</li>
</ul>
<h3>See also</h3>
<p>{{ HTML5ArticleTOC() }}</p>
Revert to this revision