美文网首页
CSS文本溢出 如何显示省略号?

CSS文本溢出 如何显示省略号?

作者: 周周很可爱 | 来源:发表于2019-06-28 15:55 被阅读0次

    在排网页的过程中,我们经常可以看到超出的文本会以省略号显示,那么怎么用CSS实现呢?
    省略号分两种,单行文本溢出省略号和多行文本溢出省略号。
    1.单行文本溢出省略号

       <style>
      .a{
       width: 200px;
      height: 30px;
     line-height: 30px;
     background: pink;
     overflow: hidden;
     text-overflow:ellipsis;
    white-space: nowrap;
    }
     </style>
     <div class='a'>
    我如果爱你绝不像攀岩的凌霄花借你的高枝炫耀自己
    </div>
    

    2.多行文本溢出省略号

    <style>
    
    .b{
       width: 300px;
      height: 61px;
       background: pink;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp:3;
      overflow: hidden;
       text-overflow: ellipsis;
       }
       </style>
     <div class="b">
    我如果爱你绝不像攀岩的凌霄花借你的高枝炫耀自己我如果爱你绝不学痴情的鸟儿为绿荫重复单调的歌曲也不止像泉源长年送来
      </div>
    
    sha.png

    知识有限,仅供参考,如有问题,麻烦指出。

    相关文章

      网友评论

          本文标题:CSS文本溢出 如何显示省略号?

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