text-overflow Attribute | textOverflow Property

Internet Development Index

Sets or retrieves a value that indicates whether to render ellipses(...) to indicate text overflow.

Syntax

HTML { text-overflow : iTextOverflow }
Scriptingobject.style.textOverflow(v) [ = iTextOverflow ]

Possible Values

iTextOverflowVariant that specifies or receives a value that indicates whether ellipses(...) display when text content has overflowed its given layout area.
ellipsisDisplay ellipses(...) for text overflow.
clipDefault. Simply clip the content and do not display ellipses for text overflow.

The property is read/write for all objects except the following, for which it is read-only: currentStyle. The property has a default value of clip. The Cascading Style Sheets (CSS) attribute is not inherited.

Remarks

This property only applies to text overflow in the inline direction (horizontal, in normal Western text). Inline overflow occurs when the text in a line overflows the available width without a breaking opportunity. To force overflow to occur and ellipses to be applied, the author must apply the nowrap value to the whiteSpace property on the element, or wrap the content in a <NOBR> tag. If there is no breaking opportunity (for example, the width is narrow or there is a long word that does not break well), then overflow may occur without nowrap being applied.

This property on the element must be set to something other than visible, the default, in order for ellipses to be rendered. The best choice is to set overflow to hidden. Setting overflow to scroll or auto will also work, but will show scrollbars.

The hidden text can be selected by selecting the ellipses. When selected, the ellipses will disappear and be replaced by the text to the extent of the layout area.

This property offers an efficient alternative to building ellipses in Dynamic HTML (DHTML). As ellipses may be rendered many times on a single page, using this property can significantly speed up performance.

Example

The following example shows how to use both ellipsis and clip values for the textOverflow property. It also demonstrates how the effect of textOverflow can be cancelled out by setting the overflow to visible. 

<HTML>
<BODY>
<DIV STYLE="text-decoration:underline;color:darkRed;
font: bold 20px Arial;font-weight:bold">
Effect of CSS property <I>text-overflow</I></DIV>
<DIV STYLE="font: bold 16px Arial; color:darkRed; font-weight:bold">
Each box (DIV element) below contains the following text:</DIV>
<DIV >We hold these truths to be self-evident,
that all people are created equal.</DIV>
<DIV STYLE="font: bold 16px Arial;color:darkRed; font-weight:bold">
Note how the STYLE settings effect the rendering of the text</DIV>
<DIV STYLE="position: relative; height: 75px; top:10">
<DIV STYLE="position: absolute; left: 10px;
font: bold 16px Arial, sans-serif; color: blue; ">
STYLE ="text-overflow : clip; overflow : hidden"
<DIV STYLE="position: absolute; left: 0px; top: 18px; color: black;
width: 120px; height: 50px; border: 1px solid blue;
font: 14px Times New Roman, serif; overflow: hidden;
text-overflow:clip">
<NOBR>We hold these truths to be self-evident,
that all people are created equal.</NOBR>
</DIV>
</DIV>
<DIV STYLE="position: relative; height: 75px; top: 70">
<DIV STYLE="position: absolute; left: 10px;
font: bold 16px Arial, sans-serif; color: blue; ">
STYLE ="text-overflow : ellipsis; overflow : hidden"
<DIV STYLE="position: absolute; left: 0px; top: 18px; color: black;
width: 120px; height: 50px; border: 1px solid blue;
font: 14px Times New Roman, serif; overflow: hidden;
text-overflow:ellipsis">
<NOBR>We hold these truths to be self-evident,
that all people are created equal.</NOBR>
</DIV>
</DIV>
<DIV STYLE="position: relative; height: 75px; top:70">
<DIV STYLE="position: absolute; left: 10px;
font: bold 16px Arial, sans-serif; color: blue; ">
STYLE ="text-overflow : ellipsis; overflow : visible"
<DIV STYLE="position: absolute; left: 0px; top: 18px; color: black;
width: 120px; height: 50px; border: 1px solid blue;
font: 14px Times New Roman, serif; overflow: visible;
text-overflow:ellipsis">
<NOBR>We hold these truths to be self-evident,
that all people are created equal.</NOBR>
</DIV>
</DIV>
</BODY>
</HTML>
This feature requires Microsoft® Internet Explorer 6 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Standards Information

This property is a Microsoft extension to Cascading Style Sheets (CSS) Non-Microsoft link.

Applies To

defaults, A, ACRONYM, ADDRESS, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, CUSTOM, currentStyle, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FONT, FORM, hn, I, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, INS, ISINDEX, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, NOBR, OL, P, PLAINTEXT, PRE, Q, RT, RUBY, runtimeStyle, S, SAMP, SMALL, SPAN, STRIKE, STRONG, style, SUB, SUP, TEXTAREA, TT, U, UL, VAR, XMP