Open In App

CSS text-overflow Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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


Last Updated : 22 Oct, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads