美文网首页
css文本文字分两行显示,超出用省略号表示

css文本文字分两行显示,超出用省略号表示

作者: 李赫尔南 | 来源:发表于2022-11-12 14:46 被阅读0次

      通过css设置文字强制不换行超出用省略号,css样式代码如下:

    {
        white-space: nowrap; //文本强制不换行;
        text-overflow:ellipsis; //文本溢出显示省略号;
        overflow:hidden; //溢出的部分隐藏;
    }
    

      想显示两行,超出用省略号表示,css样式代码如下:

    {
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }
    

       -webkit-line-clamp:用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。
       display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
      -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
      text-overflow: ellipsis;可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。

    注意:在实际使用中发现,两行显示需要设置合适的 height 属性,否则虽然能出现省略号,但是超出两行的内容也会显示出来

    相关文章

      网友评论

          本文标题:css文本文字分两行显示,超出用省略号表示

          本文链接:https://www.haomeiwen.com/subject/hqjztdtx.html