文本溢出隐藏

css--文本超出部分隐藏

1.单行文本溢出显示省略号…

    <div class="ellipsis">
        单行文本css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分
    </div>
-----------------------------------------------------------------------
    .ellipsis{
        overflow: hidden;//溢出隐藏
        text-overflow:ellipsis;//文本溢出显示省略号
        white-space:nowrap;//文本不会换行（单行文本溢出）
        width:130px;//要有固定的宽
        background-color: red;
    }

2.多行文本溢出显示省略号…

<div class="mult_line_ellipsis">
        多行文本溢出部分溢出部分溢出部分溢出部分溢出部分溢出部分css溢出部分多行文本溢出部分溢出部分溢出部分溢出部分溢出部分溢出部分css溢出部分
 </div>
-----------------------------------------------------------------------------
 .mult_line_ellipsis{//多行文本溢出
    overflow: hidden;
    text-overflow:ellipsis;//文本溢出显示省略号
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    width:130px;
    background-color:cornflowerblue;
 }

3.跨浏览器兼容的方法

<div class="imitate_ellipsis">
        浏览器兼容伪类写法css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分
</div>
-----------------------------------------------------------------------------------
 .imitate_ellipsis{
    position:relative;
    line-height:1.4em;
    height:2.8em;
    overflow:hidden;
    width:130px;
    background-color: orange;
 }
 .imitate_ellipsis::after{
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding-left:20px;
    background: -webkit-linear-gradient(left, transparent, #fff 62%);
    background: -o-linear-gradient(right, transparent, #fff 62%);
    background: -moz-linear-gradient(right, transparent, #fff 62%);
    background: linear-gradient(to right, transparent, #fff 62%);
 }

4.js实现单行溢出省略号…

<div id="ellipsis">
     浏览器兼容伪类写法css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分
</div>
----------------------------------------------------------------------------
<script type="text/javascript">
  // 参数1是允许最大文字数目
  // 参数2是元素节点的id
  function mitulineHide(num,con){
      var contain = document.getElementById(con);
      console.log(con);
      var maxSize = num;
      var txt = contain.innerHTML;
      if(txt.length>num){
          console.log('1');
          txt = txt.substring(0,num-1)+"...";
          contain.innerHTML = txt;
      }else{
          console.log("error")
     }
  };
  mitulineHide(10,'ellipsis');//调用函数
    </script>