Questions And Answers

More Tutorials

CSS Text Overflow

The text-overflow property deals with how overflowed content should be signaled to users. In this example, the ellipsis represents clipped text.

The direction property is used to change the horizontal text direction of an element.

.text {
 overflow: hidden;
 text-overflow: ellipsis;

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque expedita, iure deleniti nihil id accusamus iusto quas suscipit illo nostrum! Totam debitis asperiores soluta perspiciatis ea ducimus obcaecati. Consequuntur soluta sit doloribus assumenda qui.

Unfortunately, text-overflow: ellipsis only works on a single line of text. There is no way to support ellipsis on the last line in standard CSS, but it can be achieved with non-standard webkit-only implementation of flexboxes.

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: N; /* number of lines to show */
line-height: X; /* fallback */
max-height: X*N; /* fallback */

Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam eligendi aliquid, voluptatum commodi voluptates a tempora ea recusandae ipsam nobis voluptatibus quia at minus quod explicabo fugit unde. Modi praesentium ipsum aut corporis consequatur!


In this page (written and validated by ) you learned about CSS Text Overflow . What's Next? If you are interested in completing CSS tutorial, your next topic will be learning about: CSS Text Shadow.

Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue:

Share On:

Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using, you agree to have read and accepted our terms of use, cookies and privacy policy.