text-overflow
Published Jul 23, 2021Updated May 15, 2024
Contribute to Docs
Specifies how hidden content is signaled to the user.
Syntax
text-overflow: <value>;
The following values can be applied to the text-overflow
property:
clip
: Default value. Cuts off/hides the overflowing content.ellipsis
: Displays an ellipsis, “…”." "
: A custom string set by the author.
Note: The properties white-space: nowrap;
and overflow: hidden;
are required for text-overflow
to work.
Example 1
Setting a div
so that overflowing text is represented with an ellipsis.
div {text-overflow: ellipsis;/* Additional properties required for text-overflow to function: */overflow: hidden;white-space: nowrap;}
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn CSS on Codecademy
- Career path
Front-End Engineer
Front-end engineers work closely with designers to make websites beautiful, functional, and fast.Includes 34 CoursesWith Professional CertificationBeginner Friendly115 hours - Career path
Full-Stack Engineer
A full-stack engineer can get a project done from start to finish, back-end to front-end.Includes 51 CoursesWith Professional CertificationBeginner Friendly150 hours - Free course
Learn CSS
In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.Beginner Friendly6 hours