text-overflow

  • Revision slug: CSS/text-overflow
  • Revision title: text-overflow
  • Revision id: 25062
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 15 words added, 3 words removed

Revision Content

Summary

The text-overflow CSS property determines how overflowed content that is not displayed is signaled to the users. It can be clipped, display an ellipsis ('', U+2026 Horizontal Ellipsis) or a Web author-defined string.

text-overflow.png

This CSS property doesn't force an overflow to occur, to do so and make text-overflow to be applied, the author must apply some additional properties on the element.

Syntax

text-overflow: overflow-type                or
text-overflow: overflow-type overflow-type

where

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() }}

{{ languages({"ja": "ja/CSS/Text-overflow"}) }}

Revision Source

<h3>Summary</h3>
<p>The<code> text-overflow </code>CSS property determines how overflowed content that is not displayed is signaled to the users. It can be clipped, display an ellipsis ('<code>…</code>', <code style="text-transform:uppercase">U+2026 Horizontal Ellipsis</code>) or a Web author-defined string.</p>
<p><img alt="text-overflow.png" class="internal default" src="/@api/deki/files/5846/=text-overflow.png" style=""></p>
<p>This CSS property doesn't force an overflow to occur, to do so and make <code>text-overflow </code>to be applied, the author must apply some additional properties on the element.</p><h2>Syntax</h2>
<pre class="eval">text-overflow: <em>overflow-type       <code>         or
text-overflow: </code></em><code><em>overflow-type<code> </code>overflow-type</em></code>
</pre>
<p>where</p><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>
<p>{{ languages({"ja": "ja/CSS/Text-overflow"}) }}</p>
Revert to this revision