CSS3 Truncate Text

Images 1
Code

Summary

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

Clipping happens at the border of the box; to clip at the character limit an empty custom string can be used ('').

This property only affects content that is overflowing a block container element in its inline progression direction (not text overflowing at the bottom of a box, for example). Text can overflow when it is prevented from wrapping (e.g., due to ‘white-space: nowrap’) or a single word being too long to fit.

This CSS property doesn't force an overflow to occur; to do so and make text-overflow to be applied, the author must apply some additional properties on the element, like setting overflow to hidden.

Explample with overflow ellipsis

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem unde eveniet iusto iure fugit accusamus non sint eius deleniti et nostrum soluta tenetur dolore iste magnam illo, amet numquam nobis, recusandae autem. Quibusdam voluptatum atque dolore sint labore praesentium voluptas hic, soluta, sed expedita magni quos! Eius culpa laudantium iste excepturi iure, tenetur, adipisci totam quibusdam ea sit earum, nihil non assumenda vitae quia. Repellendus cum facere, fugit tempore velit sed ab quas natus culpa quaerat nulla eligendi illum reprehenderit vitae deleniti repellat, quo enim ipsam fugiat recusandae dolorem sit error eum! Eveniet eum harum, deleniti nobis accusantium quos, quis.

Other values

CSS value	`direction: ltr`		`direction: rtl`
CSS value	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

Css


.truncate {

 white-space: nowrap;

 overflow: hidden;

 text-overflow: ellipsis;

}