mozilla

Revision 25036 of text-overflow

  • Revision slug: CSS/text-overflow
  • Revision title: text-overflow
  • Revision id: 25036
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 50 words added, 16 words removed

Revision Content

{{ CSSRef() }}

Summary

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

The text-overflow CSS property determines 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

Example

p {
       border: solid;
       white-space: nowrap;         /* needed to get it work */
       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
8.0 text-overflow | -ms-text-overflow
(both are synonym, don't use the -ms- prefix)
Firefox (Gecko) --- ---
Opera 9.0  
-o-text-overflow
Safari (WebKit) 1.3 (312.3) text-overflow

 

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 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">Example</h3>
<pre class="eval">p {
       border: solid;
       white-space: nowrap;         /* needed to get it work */
       width: 100%;                 /* 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>
<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 rowspan="3">Internet Explorer</td> <td><strong>6.0</strong></td> <td><code>text-overflow</code></td> </tr> <tr> <td rowspan="2">8.0</td> <td rowspan="2"><code>text-overflow | -ms-text-overflow</code><br> (both are synonym, don't use the <code>-ms-</code> prefix)</td> </tr>  <tr> <td>Firefox (Gecko)</td> <td>---</td> <td>---</td> </tr> <tr> <td>Opera</td> <td><strong>9.0</strong><code>   <br> </code></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> </p>
Revert to this revision