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實(shí)現(xiàn)單行溢出省略號…

<div id="ellipsis">
     瀏覽器兼容偽類寫法css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分
</div>
----------------------------------------------------------------------------
<script type="text/javascript">
  // 參數(shù)1是允許最大文字?jǐn)?shù)目
  // 參數(shù)2是元素節(jié)點(diǎn)的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');//調(diào)用函數(shù)
    </script>