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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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>

    chevron_right

    
    

    Output:

    CSS text-overflow_clip gfg

    CSS text-overflow_clip

  • ellipsis: Text is clipped and the clipped text is represented as ‘…’ .
    Syntax:

    text-overflow: ellipsis;
    

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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>

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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>

    chevron_right

    
    

    Output:

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

    Syntax:


    text-overflow: initial;
    

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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>

    chevron_right

    
    

    Output:

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

    Syntax:

    text-overflow: inherit;
    

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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>

    chevron_right

    
    

    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 arrow_drop_up

Computer Engineering student at St Francis Institute of Technology with good programming and problem-solving skills Passionate about solving real world problems through technology and implementing innovative ideas Looking to secure a responsible career opportunity to utilize my training and skills,

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.