Learn how to use CSS text-overflow

By admin|Computer, CSS

The text-overflow CSS property determines how overflowed content that is not displayed is signaled to the users. It can be clipped, display an ellipsis (‘…’, U+2026 HORIZONTAL ELLIPSIS) or a Web author-defined string.

Examples

p {
  white-space: nowrap;
  width: 100%;                   
  overflow: hidden;              /* "overflow" value must be different from "visible" */
  text-overflow: ellipsis;
}

CSS value	direction: ltr		direction: rtl
	Expected Result	Live result	Expected Result	Live result
visible overflow	1234567890	1234567890	0987654321	1234567890
text-overflow: clip		123456		1234567890
text-overflow: ''	12345	123456	54321	1234567890
text-overflow: ellipsis	1234…	1234567890	…4321	1234567890
text-overflow: '.'	1234.	1234567890	.4321	1234567890
text-overflow: clip clip	123456	1234567890	654321	1234567890
text-overflow: clip ellipsis	1234…	1234567890	6543…	1234567890
text-overflow: clip '.'	1234.	1234567890	6543.	1234567890
text-overflow: ellipsis clip	…3456	1234567890	…4321	1234567890
text-overflow: ellipsis ellipsis	…34…	1234567890	…43…	1234567890
text-overflow: ellipsis '.'	…34.	1234567890	…43.	1234567890
text-overflow: ',' clip	,3456	1234567890	,4321	1234567890
text-overflow: ',' ellipsis	,34…	1234567890	,43…	1234567890
text-overflow: ',' '.'	,34.	1234567890	,53.	1234567890

Browser compatibility
Chrome: 1.0 (312.3)
Firefox: 7.0 (7.0)
Internet Explorer: 6.0
Opera: 9
Safari (WebKit) :1.3 (312.3)