mozilla

Revision 25033 of text-overflow

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

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: 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

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: 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>
<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 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/">CSS3 Text</a> Latest working draft, currently without<code> text-overflow</code>.</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