text-overflow

  • Revision slug: CSS/text-overflow
  • Revision title: text-overflow
  • Revision id: 25052
  • Created:
  • Creator: Brettz9
  • Is current revision? No
  • Comment syntax coloring; one or more formatting changes

Revision Content

{{ CSSRef() }}{{ unimplemented_header() }}

Summary

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

The text-overflow CSS property determines whether an ellipsisdisplays 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 ellipses(U+2026, &hellip;) to represent clipped text.
clip
Default value, clips text.
<string>
Render the given string to represent clipped text. Currently not implemented in any browser.

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

Browser compatibility

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

The specification is incomplete. The idea is to standardize text-overflow in CSS3 Basic User Interface Module.

See also

{{ HTML5ArticleTOC() }}

Revision Source

<p>{{ CSSRef() }}{{ unimplemented_header() }}</p>
<h3>Summary</h3>
<p>{{ unimplemented_inline() }} in Gecko (Firefox), {{ Bug("312156") }}.</p>
<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 | &lt;string&gt;</pre>
<h3 name="Values">Values</h3>
<dl> <dt>ellipsis</dt> <dd>Display ellipses<strong> … </strong>(U+2026, &amp;hellip;) to represent clipped text.</dd> <dt>clip</dt> <dd>Default value, clips text.</dd>
</dl>
<dl> <dt>&lt;string&gt;</dt> <dd>Render the given string to represent clipped text. Currently not implemented in any browser.</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), 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>---</td> <td>---</td> <td>---</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>
<p>The specification is incomplete. The idea is to standardize<code> text-overflow </code>in <a class=" external" href="http://www.w3.org/Style/CSS/specs#ui" title="http://www.w3.org/Style/CSS/specs#ui">CSS3 Basic User Interface Module</a>.</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/#text-overflow" title="http://www.w3.org/TR/css3-text/#text-overflow">CSS 3 Text #text-overflow</a>  Latest working draft.</li>
</ul>
<h3>See also</h3>
<p>{{ HTML5ArticleTOC() }}</p>
Revert to this revision