美文网首页
实现单行文本溢出和多行文本溢出

实现单行文本溢出和多行文本溢出

作者: 前端新阳 | 来源:发表于2020-03-15 23:47 被阅读0次

    1.单行文本溢出需要满足三个条件:

    overflow:hidden; white-space:nowrap; text-overflow:ellipsis;

    2.多行文本溢出需要满足下面几个条件:

      display:-webkit-box; overflow:hidden;
    
      text-overflow:ellipsis; word-break:break-all;
    
      -webkit-box-orient:vertical; //子元素应该被水平或垂直排列
    
      -webkit-line-clamp:3;  //3行后显示省略号
    
    

    例子如下:


    效果图

    相关文章

      网友评论

          本文标题:实现单行文本溢出和多行文本溢出

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