CSS | text-overflow Property

Last Updated : 09 Aug, 2019

CSS text-overflow Property is used to specify that some text has overflown and hidden from view. The white-space property must be set to nowrap and overflow property must be hidden.

Syntax:

text-overflow: clip|string|ellipsis|initial|inherit;

Property Values:

clip: Text is clipped and cannot be seen. This is the default value.

Syntax:

text-overflow: clip;

Example:

<html>
<head>
    <title>
        CSS | text-overflow Property
    </ttile>
    <style type="text/css">
        div{
            width: 500px;
            font-size: 50px;
            white-space: nowrap; 
            overflow: hidden;
            text-overflow: clip;
  
        }
    </style>
</head>
<body>
    <div>
        Geeks For Geeks:
        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:

<html>
  
<head>
    <title>
        CSS | text-overflow Property
    </ttile>
    <style type="text/css">
        div {
            width: 500px;
            font-size: 50px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: clip;
        }
    </style>
</head>
  
<body>
    <div>
        Geeks For Geeks:
        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 Firefox browser.

Syntax:

text-overflow: string;

where a string is defined by the coder.

Example:

<html>
  
<head>
    <title>
        CSS | text-overflow Property
    </ttile>
    <style type="text/css">
        div {
            width: 500px;
            font-size: 50px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: "Value Clipped";
        }
    </style>
</head>
  
<body>
    <div>
        Geeks For Geeks:
        A computer science portal for geeks.
    </div>
</body>
  
</html>

Output:

initial: This value sets the text-overflow property to default value.

Syntax:

text-overflow: initial;

Example:

<html>
  
<head>
    <title>
        CSS | text-overflow Property
    </ttile>
    <style type="text/css">
        div {
            width: 500px;
            font-size: 50px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: initial;
        }
    </style>
</head>
  
<body>
    <div>
        Geeks For Geeks:
        A computer science portal for geeks.
    </div>
</body>
  
</html>

Output:

inherit: This value sets the text-overflow property to the value of the parent element.

Syntax:

text-overflow: inherit;

Example:

<html>
  
<head>
    <title>
        CSS | text-overflow Property
    </ttile>
    <style type="text/css">
        div {
            width: 500px;
            font-size: 50px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
          
        h1 {
            width: 500px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: inherit;
        }
    </style>
</head>
  
<body>
    <div>
        Geeks For Geeks:
        A computer science portal for geeks.
        <h1>
         I have inherited my overflow property from div.
        </h1>
    </div>
</body>
  
</html>