CSS | text-overflow Property

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> 

Output:

Supported Browsers: The browser supported by text-overflow property are listed below:

Chrome: 4.0
Firefox: 7.0
Safari: 3.1
Edge: 16
Opera: 11.0

My Personal Notes

Recommended Posts: