text-overflow

Description

Text-overflow effects inline content when it overflows it's block container. Overflow can only occur if the block container has an overflow value of something other then visible and when white-space is set to no-wrap.

ellipsis: Renders an ellipsis character (U+2026) or three dots "..." to represent clipped inline content.

clip: Clips inline content that overflows, any extra characters will not be visible. Characters may be only partially rendered.

<string>: replaces the overflowing content with the <string>

Most browsers support clip and ellipsis, newer values of <string> and two value for left and right are not well supported and could be removed from the spec.

http://www.w3.org/TR/2012/WD-css3-ui-20120117/#atrisk

Live Example

Play with the code in the textarea below.

<!DOCTYPE HTML>
<html>
<head>
<title>text-overflow example</title>
<style type="text/css">
p{
 width: 200px;
 border: solid 1px #666;
 overflow: hidden;
 border: solid 1px #666;
 margin:.5em;
 white-space:nowrap
}

.one{
 text-overflow:clip;
}
.two{
 text-overflow:ellipsis;
}
.three{
 text-overflow:'blah';
 }
.four{
 overflow:visible; 
 text-overflow:ellipsis;
}
p span{
 margin-left:-1em;
}
.five{
 text-overflow: clip clip;
}
.six{
 text-overflow: ellipsis ellipsis;
}
</style>
<body>

One an example of text-overflow: clip; we should see if this get's clipped.
Two an example of text-overflow: ellipsis; '...' should be visible in place of any overflow.
Three an example of text-overflow: string; where the string = 'blah' we should see if this get's the chop.
Four an example of where overflow is set to visible, text-overflow doesn't apply
Five an example of where text-overflow has two properties for left and right clip
Six an example of where text-overflow has two properties for left and right ellipsis

</body>
</html>

Values

( clip | ellipsis | <string> ){1,2} | inherit

Default value

clip

Introduced in CSS version

2.1

Applies to elements

block containers where overflow value is other then visible

Inherited

Browser Support

Browsers	IE	Firefox	Safari	Opera	Chrome
Versions	6	7	5	11	4

Belongs to:

Font and Text

See the full list CSS properties and browser support: CSS Properties

User login

Navigation