• 技术文章 >web前端 >css教程

    css如何隐藏溢出来的文字

    VV2020-11-12 14:07:41原创389

    css隐藏溢出来的文字的方法:可以利用text-overflow属性来实现,如【text-overflow:ellipaos;】,属性值ellipsis表示显示省略符号来代表溢出来的文字。

    属性介绍:

    text-overflow 属性规定当文本溢出包含元素时发生的事情。

    (学习视频分享:css视频教程

    语法:

    text-overflow: clip|ellipsis|string;

    属性值:

    f2d3fb040e60144270c4d9c5cc0f7d5.png

    让溢出的文字隐藏

    text-overflow:ellipaos;/*让最后一个显示部分遮掩部分的字消失,而变成三个点点的省略号*/
    overflow:hidden; /*这个参数可以让超出部分隐藏起来,但是这个隐藏是一种按照宽度而来的直接隐藏*/
    white-space:nowrap; /* 确保超出文字显示在一行里面*/

    举例:

    {  
      width:XXpx;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    相关推荐:CSS教程

    以上就是css如何隐藏溢出来的文字的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css 文字
    上一篇:怎么用CSS调整背景图的大小 下一篇:css伪元素是用来干嘛的
    大前端线上培训班

    相关文章推荐

    • CSS如何实现单行和多行文本溢出显示省略号• css实现文字溢出省略号的四种方法(附代码)• Css3如何实现文本溢出隐藏并显示省略号效果• css实现文本溢出时显示省略号

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网