当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


CSS text-overflow用法及代码示例


CSS text-overflow属性用于指定某些文本已溢出并从视图中隐藏。空格属性必须设置为nowrap,溢出属性必须隐藏。

用法:

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

属性值:


  • clip:文本被剪切,无法看到。这是默认值。

    用法:

    text-overflow:clip;
    

    例:

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

    输出:

    CSS text-overflow_clip gfg

    CSS text-overflow_clip

  • ellipsis:文本被剪切,剪切后的文本表示为“…”。句法:
    text-overflow:ellipsis;
    

    例:

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

    输出:

  • string:剪切后的文本使用编码人员选择的字符串向用户表示。此选项仅在Firefox浏览器中可见。

    用法:

    text-overflow:string;
    
    where a string is defined by the coder.
    

    例:

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

    输出:

  • initial:此值将text-overflow属性设置为默认值。

    用法:


    text-overflow:initial;
    

    例:

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

    输出:

  • inherit:此值将text-overflow属性设置为父元素的值。

    用法:

    text-overflow:inherit;
    

    例:

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

    输出:

支持的浏览器:下面列出了text-overflow属性支持的浏览器:

  • chrome :4.0
  • 的Firefox:7.0
  • Safari:3.1
  • 边:16
  • Opera :11.0


相关用法


注:本文由纯净天空筛选整理自roshalmoraes大神的英文原创作品 CSS | text-overflow Property。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。