HTML and CSS Reference
In-Depth Information
Notes
• Under IE 8 this property is known as
-ms-text-kashida-space
to correctly show
it is an extension.
• There is brief allusion to this property in the CSS3 specification suggesting that it
may eventually end up in the CSS3 Text module.
text-overflow
This property defines whether or not an ellipsis should be displayed when content
overflows a region.
Syntax
text-overflow: ellipsis | clip
Examples
p {width: 200px; border: 1px solid black;
overflow: hidden; white-space: nowrap;
background-color: orange;}
.overflow {-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
text-overflow: ellipsis;}
Compatibility
CSS3 (see notes)
Chrome 2+, IE 6+, Opera 9+, Safari 3+
Notes
• For this property to work, the
overflow
property of the applied element should be
set to something other than
visible
.
• This property should be written as
-ms-text-overflow
under IE 8 as it is an
extension. It is supported as
-o-text-overflow
in Opera and
-webkit-text-
overflow
in WebKit-based browsers.
• Some sites on the Web indicate
-moz-text-overflow
as supported but, as of
Firefox 3.5, documentation and testing reveals it is not. Interestingly, scripts exist
that try to implement the idea.
• The CSS3 specification suggests that this property is shorthand for
text-
overflow-ellipsis
and
text-overflow-mode
. The current property acts as
text-overflow-mode
, which sets how overflow should happen with an ellipsis.
The
text-overflow-ellipsis
property would be used to set the string or image
to be used as the overflow indicator. At the time of this edition's writing, neither
property is supported and this portion of the specification is still in progress.
