CSS text-overflow – truncate text with three dots

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

clipDefault. Content is clipped without ellipsis.
ellipsisContent 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>
refresh

Example – text-overflow – truncate with ellipsis

<style type="text/css">
.box1 {
  width: 200px;
  background-color:lightgreen;
  overflow: hidden;
  white-space:nowrap;
  text-overflow: ellipsis;
}
</style>

<div class="box1">
Truncate with ellipsis. This is some text.
</div>
refresh

Related

Specification and Browser compatibility

SpecificationStatusCategories
CSS3 Text-overflowW3C Candidate RecommendationCSS3
Desktop
ChromeFirefoxIEEdgeSafariOpera
Yes 4+ Yes 7+ Yes 6+ Yes 12+ Yes 3.1+ Yes 11+
Mobile
Android ChromeAndroid FirefoxiOS SafariIE MobileOpera Mobile
Yes 47+ Yes 44+ Yes 3.2+ Yes 10+ Yes 12.1+
source: caniuse.com
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments