CSS property text-overflow specifies rendering when inline content overflows its line box edge in its block container element (“the block”) that has overflow other than visible.
CSS property text-overflow
CSS version:
CSS 3
Value:
clip | ellipsis
Initial:
clip
Applies to:
block containers
Inherited:
no
Note that CSS3 also mentions custom string value. But it has limited browser support.
text-overflow values
clip
Default. Content is clipped without ellipsis.
ellipsis
Content is clipped and render an ellipsis character (three dots …)
Note that text-overflow is often used with overflow:hidden and white-space:nowrap (or white-space:pre).
Example – text-overflow clip
<style type="text/css">
.box1 {
width: 200px;
background-color:lightgreen;
overflow: hidden;
white-space:nowrap;
text-overflow: clip;
}
</style>
<div class="box1">
Truncate without ellipsis. This is some text.
</div>
