The text-overflow property cuts off text that’s too long to fit, optionally replacing with ellipsis. In other word this property specifies what happens when text overflows the content.
The text-overflow property must be used in conjunction with the overflow property, as well as white-space property; more precisely the overflow property must have a value of hidden, scroll or auto, while the white-space property must be set to no-wrap.
Syntax:
selector {
text-overflow: clip | ellipsis | string | initial | inherit;
}
Values:
Following values are permitted to be used with text-overflow property:
- clip; Default value which clips the text.
- string; Renders the given string to represent clipped text.
- ellipsis; Renders an ellipsis (“…”) to represent clipped text.
- initial, inherit
Example
The text-overflow property example with string, ellipses and default clip values.
x
<html>
<head><style type="text/css">
h5 {
margin:0.8em 0 0 0.8em;
}
p {
padding:0.6em; margin:0px;
white-space: nowrap;
width: 10em;
border:2px solid blue;
overflow: hidden;
text-overflow: clip;
}
#p1 {
border:2px solid green;
text-overflow: ellipsis;
}
#p2 {
border:2px solid red;
text-overflow: string;
}
</style></head>
<body>
<h5>CLIP:</h5>
<p>This paragraph should CLIP the text.</p>
<h5>ELLIPSIS:</h5>
<p id="p1">This paragraph should create ELLIPSIS.</p>
<h5>STRING:</h5>
<p id="p2">This paragraph uses a STRING value.</p>
</body>
</html>
Comments
No comments have been made yet.
Please login to leave a comment. Login now