1
edit
Changes
no edit summary
<span style="margin:0;background:#ffff33;font-size:120%;font-weight:bold;border:1px solid #a3b0bf;text-align:left;color:#000;padding:0.2em 0.4em;">This document is a work in progress and is subject to change.</span><br /><br />
== Summary ==
In CSS 3, The text-overflow property is a shorthand property for the text-overflow-mode property and the text-overflow-ellipsis property. The text-overflow property deals with the situation where some textual content is clipped when it overflows the element's box. This situation only occurs when the [[CSS_GUIDE_OVERFLOW|overflow]] property has the values: hidden, scroll or auto.
<table border="0">
<tr>
<td><b>Applicability:</b></td><td>The overflow property affects block-level and inline-block elements<td>
</tr>
<tr>
<td><b>[http://www.w3.org/TR/CSS21/media.html#visual-media-groups Media Group:]</b>
</td><td>Visual</td>
</tr>
<tr>
<td><b>Inherited:</b></td><td>No</td>
</tr>
</table>
== Syntax ==
<pre>
TARGET_ELEMENT{ text-overflow: [text-overflow-mode] [text-overflow-ellipsis] }
</pre>
== Legal Values ==
Since this is a shorthand property method for the [[CSS_GUIDE_TEXT-OVERFLOW-MODE|text-overflow-mode]] property and [[CSS_GUIDE_TEXT-OVERFLOW-ELLIPSIS|text-overflow-ellipsis]] property, the legal values of text-overflow property will consist of the legal values that this property encapsulates.
For the [[CSS_GUIDE_TEXT-OVERFLOW-MODE|text-overflow-mode]] property, the legal values are:
* clip - The text is clipped as appropriate for the text content. Glyphs representation of the text may only be partially rendered.
* ellipsis - A visual hint is inserted at the box boundary where text overflow occurs. The [[CSS_GUIDE_TEXT-OVERFLOW-ELLIPSIS|text-overflow-ellipsis]] property determines the content of the hint. The insertions take place after the the last letter that entirely fits on the line.
* ellipsis-word - A visual hint is inserted at the box boundary where text overflow occurs. The [[CSS_GUIDE_TEXT-OVERFLOW-ELLIPSIS|text-overflow-ellipsis]] property determines the content of the hint. The insertions take place after the last word that entirely fits on the line.
For the [[CSS_GUIDE_TEXT-OVERFLOW-ELLIPSIS|text-overflow-ellipsis]] property, the legal values are:
* a string value for the overflow visual hint.
* a URI value of an image to be used for the overflow visual hint.
== Mozilla Recommended Values ==
== Usage Examples==
/* text-overflow for a blockquote element */
blockquote { text-overflow: ellipsis "..." }
/* Set the text-overflow for a blockquote element */
blockquote { text-overflow: clip }
/* Set the text-overflow for a blockquote element */
blockquote { text-overflow: ellipsis-word "..." }
== Notes ==
== Specification Conformance ==
* [http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-overflow CSS 3]
== Browser Compatibility ==
== See Also ==
* [[CSS_GUIDE_TEXT-OVERFLOW-ELLIPSIS|text-overflow-ellipsis]]
* [[CSS_GUIDE_TEXT-OVERFLOW-MODE|text-overflow-mode]]
== Summary ==
In CSS 3, The text-overflow property is a shorthand property for the text-overflow-mode property and the text-overflow-ellipsis property. The text-overflow property deals with the situation where some textual content is clipped when it overflows the element's box. This situation only occurs when the [[CSS_GUIDE_OVERFLOW|overflow]] property has the values: hidden, scroll or auto.
<table border="0">
<tr>
<td><b>Applicability:</b></td><td>The overflow property affects block-level and inline-block elements<td>
</tr>
<tr>
<td><b>[http://www.w3.org/TR/CSS21/media.html#visual-media-groups Media Group:]</b>
</td><td>Visual</td>
</tr>
<tr>
<td><b>Inherited:</b></td><td>No</td>
</tr>
</table>
== Syntax ==
<pre>
TARGET_ELEMENT{ text-overflow: [text-overflow-mode] [text-overflow-ellipsis] }
</pre>
== Legal Values ==
Since this is a shorthand property method for the [[CSS_GUIDE_TEXT-OVERFLOW-MODE|text-overflow-mode]] property and [[CSS_GUIDE_TEXT-OVERFLOW-ELLIPSIS|text-overflow-ellipsis]] property, the legal values of text-overflow property will consist of the legal values that this property encapsulates.
For the [[CSS_GUIDE_TEXT-OVERFLOW-MODE|text-overflow-mode]] property, the legal values are:
* clip - The text is clipped as appropriate for the text content. Glyphs representation of the text may only be partially rendered.
* ellipsis - A visual hint is inserted at the box boundary where text overflow occurs. The [[CSS_GUIDE_TEXT-OVERFLOW-ELLIPSIS|text-overflow-ellipsis]] property determines the content of the hint. The insertions take place after the the last letter that entirely fits on the line.
* ellipsis-word - A visual hint is inserted at the box boundary where text overflow occurs. The [[CSS_GUIDE_TEXT-OVERFLOW-ELLIPSIS|text-overflow-ellipsis]] property determines the content of the hint. The insertions take place after the last word that entirely fits on the line.
For the [[CSS_GUIDE_TEXT-OVERFLOW-ELLIPSIS|text-overflow-ellipsis]] property, the legal values are:
* a string value for the overflow visual hint.
* a URI value of an image to be used for the overflow visual hint.
== Mozilla Recommended Values ==
== Usage Examples==
/* text-overflow for a blockquote element */
blockquote { text-overflow: ellipsis "..." }
/* Set the text-overflow for a blockquote element */
blockquote { text-overflow: clip }
/* Set the text-overflow for a blockquote element */
blockquote { text-overflow: ellipsis-word "..." }
== Notes ==
== Specification Conformance ==
* [http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-overflow CSS 3]
== Browser Compatibility ==
== See Also ==
* [[CSS_GUIDE_TEXT-OVERFLOW-ELLIPSIS|text-overflow-ellipsis]]
* [[CSS_GUIDE_TEXT-OVERFLOW-MODE|text-overflow-mode]]
