mozilla

Revision 25031 of text-overflow

  • Revision slug: CSS/text-overflow
  • Revision title: text-overflow
  • Revision id: 25031
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment no wording changes

Revision Content

Summary

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

Indicates whether ellipsesdisplay 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

Mozilla Extensions

n/a

Examples

p {
       border: solid;
       white-space: nowrap;         /* needed to get it work */
       width: 15em;                 /* 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

Browser compatibility

Browser Lowest Version
Internet Explorer 6.0 text-overflow
8.0 text-overflow | -ms-text-overflow (both properties are synonymical)
Firefox n/a
Opera 9.0 -o-text-overflow
Safari 1.0 text-overflow

 

Revision Source

<h3 name="Summary">Summary</h3>
<p>{{ unimplemented_inline() }} in Gecko (Firefox). {{ Bug("312156") }}</p>
<p>Indicates whether ellipses<strong> … </strong>display 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">Mozilla Extensions</h3>
<p>n/a</p>
<h3 name="Examples">Examples</h3>
<pre class="eval">p {
       border: solid;
       white-space: nowrap;         /* needed to get it work */
       width: 15em;                 /* IE6 needs any width */
       overflow: hidden;            /* <em>overflow value</em> must be different from <em>visible</em> */ 

       -o-text-overflow: ellipsis;  /* Opera */
       text-overflow:    ellipsis;  /* IE, Safari (Webkit) */
}<span class="comment"><br></span></pre>
<h3 name="Specifications">Specifications</h3>
<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">CSS3 Text RC 2003-05-14 #text-overflow</a> Note: This document is out of date.<code> text-overflow </code>is not part of the current CSS3 draft (see below). It is expected to come back later.</li> <li><a class="external" href="http://www.w3.org/TR/css3-text/" title="http://www.w3.org/TR/css3-text/">CSS3 Text</a> (latest working draft)</li>
</ul><h3 name="Browser_compatibility">Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> </tr> <tr> <td>Internet Explorer</td> <td>6.0<code> text-overflow</code><br> 8.0<code> text-overflow | -ms-text-overflow </code>(both properties are synonymical)</td> </tr> <tr> <td>Firefox</td> <td>n/a</td> </tr> <tr> <td>Opera</td> <td>9.0 <code>-o-text-overflow</code></td> </tr> <tr> <td>Safari</td> <td>1.0<code> text-overflow</code></td> </tr> </tbody>
</table>
<p> </p>
Revert to this revision