Export (0) Print
Expand All
top
Expand Minimize

text-overflow

Expression Studio 4.0
important noteImportant

This documentation is preliminary and subject to change.

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

Syntax

{ text-overflow: iTextOverflow }

Possible values

iTextOverflow

String that specifies a value that indicates whether ellipses(...) display when text content has overflowed its given layout area.

ellipsis

Display ellipses(...) for text overflow.

clip

Default. Simply clip the content and do not display ellipses for text overflow.

string

Display string instead of an ellipsis to indicate clipped text.

The property has a default value of clip. It 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 white-space 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.

Examples

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

<html>
<body>
<div style="text-decoration: underline; color: #7F0000;
font: bold 20px Arial; font-weight: bold">
Effect of CSS property <em>text-overflow</em></div> 
<div style ="font: bold 16px Arial; color: #7F0000; 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: #7F0000; font-weight: bold">
Note how the style settings effect the rendering of the text</div>

<div style ="position: relative; height: 75px; top: 10px;">
<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: 70px;">
<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>

Standards information

This property is defined in CSS Selectors Level 3 Gg721774.xtlink_newWindow(en-us,Expression.40).png.

Applies to

blockquote, body, button, center, dd, dfn, div, dl, dt, fieldset, form, hn, hr, li, ol, p, table, td, th, tr, ul, xmp

See also

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.

Community Additions

ADD
Show:
© 2014 Microsoft