Related Articles

Related Articles

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:



    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
Recommended Articles
Page :