前端·小阳仔

关注互联网和前端开发技术的博客网站！

前端·小阳仔

当前位置：导航 > 前端小知识 > 文章详情

CSS超出省略。。。

发布时间：2017-02-17 作者：富朝阳

我要评论

什么是溢出?如果在样式中指定了盒子的宽度与高度,就有可能出现某些内容在盒中容纳不下的情况。需要实现这个效果有两张方案啦，一种是CSS实现，还有一种是万能的JavaScript脚本实现啦，废话不多说，直接上代码：

CSS单行：

<style>
.wrap{
    width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
<body>
    <p class="wrap">
      什么是溢出?如果在样式中指定了盒子的宽度与高度
    </p>
</body>

CSS多行：

<style>
.wrap{
    width: 100px;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 这里是超出几行省略 */
    overflow: hidden;
}
</style>
<body>
    <p class="wrap">
什么是溢出?如果在样式中指定了盒子的宽度与高度
什么是溢出?如果在样式中指定了盒子的宽度与高度
    </p>
</body>

微信超过2行出现省略号

display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

JavaScript脚本实现：

/**
  * 超出部分显示···
  * num 控制显示字符长度，com控制显示dom元素
  */
  function mitulineHide(num,com){
    let contain = document.querySelector(com);
    console.log(contain);
    let maxSize = num;
    let txt = contain.innerHTML;
    if(txt.length > num){
      console.log(1)
      txt = txt.substring(0,num-1)+"...";
      contain.innerHTML = txt;
    }else{
      return;
    }
  }

  mitulineHide(50,"p");

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。