text-overflow

  • Revision slug: CSS/text-overflow
  • Revision title: text-overflow
  • Revision id: 25057
  • Created:
  • Creator: Tantek
  • Is current revision? No
  • Comment make it clear that CSS3-UI text-overflow definition is where it's at; 14 words added, 29 words removed

Revision Content

Summary

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

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), Firefox 7, Opera 11 */
}

Browser compatibility

Browser Lowest version Support of
Internet Explorer 6.0 text-overflow ellipsis | clip
Firefox (Gecko) 7.0 (7.0) text-overflow ellipsis | clip
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

See also

{{ HTML5ArticleTOC() }}

Revision Source

<h3>Summary</h3>
<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><code>ellipsis</code></dt> <dd>Display ellipses<strong> … </strong>(U+2026,<code> &amp;hellip;</code>) to represent clipped text.</dd> <dt><code>clip</code></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), Firefox 7, 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><strong>7.0</strong> (7.0)</td> <td><code>text-overflow</code></td> <td><code>ellipsis | clip</code></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>
<ul> <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> <li>Previously (OBSOLETE) <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></li>
</ul><h3>See also</h3>
<p>{{ HTML5ArticleTOC() }}</p>
Revert to this revision