CSS text-overflow Property - GeeksforGeeks

22 Oct, 2021
A text-overflow property in CSS is used to specify that some text has overflown and hidden from view. The white-space property must be set to nowrap and the overflow property must be set to hidden. The overflowing content can be clipped, display an ellipsis (‘...’), or display a custom string.
Syntax:
text-overflow: clip|string|ellipsis|initial|inherit;
Property Values:  All the properties are described well with the example below.
clip: Text is clipped and cannot be seen. This is the default value.
Syntax:
text-overflow: clip;
Example: This example illustrates the use of the text-overflow property where its value is set to clip. 
HTML
<html><head>    <title> CSS | text-overflow Property </title>    <style type="text/css">    div {        width: 500px;        font-size: 50px;        white-space: nowrap;        overflow: hidden;        text-overflow: clip;    }    </style></head> <body>    <div>GeeksforGeeks: A computer science portal for geeks.</div></body></html>
Output:
CSS text-overflow_clip
ellipsis: Text is clipped and the clipped text is represented as ‘...’.
Syntax:
text-overflow: ellipsis;
Example: This example illustrates the use of the text-overflow property where its value is set to ellipsis.
HTML
<html><head>    <title> CSS | text-overflow Property </title>    <style type="text/css">    div {        width: 500px;        font-size: 50px;        white-space: nowrap;        overflow: hidden;        text-overflow: ellipsis;    }    </style></head> <body>    <div> GeeksforGeeks: A computer science portal for geeks. </div></body></html>
Output:
string: The clipped text is represented to the user using a string of the coder’s choice. This option is only visible in the Firefox browser.
Syntax:
text-overflow: string;
where a string is defined by the developer.
Example: This example illustrates the use of the text-overflow property where its value is set to a specific string value.
HTML
<html><head>    <title> CSS | text-overflow Property </title>    <style type="text/css">    div {        width: 500px;        font-size: 50px;        white-space: nowrap;        overflow: hidden;        text-overflow: " ";    }    </style></head> <body>    <div> GeeksforGeeks: A computer science portal for geeks. </div></body></html>
Output:
initial: It is used to set an element’s CSS property to its default value ie., this value will set the text-overflow property to its default value.
Syntax:
text-overflow: initial;
Example: This example illustrates the use of the text-overflow property where its value is set to initial.
HTML
<html><head>    <title> CSS | text-overflow Property </title>    <style type="text/css">    div {        width: 500px;        font-size: 50px;        white-space: nowrap;        overflow: hidden;        text-overflow: initial;    }    </style></head> <body>    <div> GeeksforGeeks : A computer science portal for geeks. </div></body></html>
Output:
inherit: It is used to inherit a property to an element from its parent element property value ie., the value will set the text-overflow property to the value of the parent element.
Syntax:
text-overflow: inherit;
Example: This example illustrates the use of the text-overflow property where its value is set to inherit.
HTML
<html><head>    <title> CSS | text-overflow Property </title>    <style type="text/css">    div {        width: 500px;        font-size: 50px;        white-space: nowrap;        overflow: hidden;        text-overflow: ellipsis;    }         h3 {        width: 500px;        white-space: nowrap;        overflow: hidden;        text-overflow: inherit;    }    </style></head> <body>    <div> GeeksforGeeks: A computer science portal for geeks.        <h3>         I have inherited my overflow property from div.        </h3>    </div></body></html>
Output:
Supported Browsers: The browser supported by the text-overflow property are listed below:
Chrome 1.0
Firefox 7.0
Microsoft Edge 12.0
IE 6.0
Safari 1.3
Opera 11.0
bhaskargeeksforgeeks
CSS-Properties
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
Types of CSS (Cascading Style Sheet)
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?