mozilla

Revision 25043 of text-overflow

  • Revision slug: CSS/text-overflow
  • Revision title: text-overflow
  • Revision id: 25043
  • Created:
  • Creator: Znerd
  • Is current revision? No
  • Comment (1) Property value can also be a string. (2) IE8 Std Mode only supports the property with an "-ms-" prefix; 70 words added, 14 words removed

Revision Content

{{ CSSRef() }}

Summary

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

The text-overflow CSS property determines whether some text (typically an ellipsis) 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.

Syntax

text-overflow:  ellipsis | clip | <string>

Values

ellipsis
Display ellipsesfor text overflow.
clip
Default value
<string>
Render the given string to represent clipped 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 */
      -ms-text-overflow: ellipsis;   /* IE 8 Standards Mode */
      text-overflow:     ellipsis;   /* IE, Safari/Chrome (WebKit) */
   }

Specifications

The specification of text-overflow is incomplete.

Browser compatibility

Browser Lowest Version Support of
Internet Explorer 6.0 text-overflow (see note below for IE 8)
Firefox (Gecko) --- ---
Opera 9.0 -o-text-overflow
Safari (WebKit) 1.3 (312.3) text-overflow

Note: In IE8 Standards Mode, text-overflow is no longer supported and replaced with -ms-text-overflow. See the article Microsoft CSS Vendor Extensions on the IEBlog.

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 some text (typically 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 | &lt;string&gt;</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> <dt>&lt;string&gt;</dt> <dd>Render the given string to represent clipped text.</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 */
      -ms-text-overflow: ellipsis;   /* IE 8 Standards Mode */
      text-overflow:     ellipsis;   /* IE, Safari/Chrome (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> (see note below for IE 8)<code><br> </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>Note: In IE8 Standards Mode, text-overflow is no longer supported and replaced with <code>-ms-text-overflow.</code> See the article <a class="external" href="http://blogs.msdn.com/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx" title="http://blogs.msdn.com/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx">Microsoft CSS Vendor Extensions</a> on the IEBlog.</p>
Revert to this revision