文本超出隐藏

单行文本超出隐藏

html代码:

  <div class="single-over" style="width:100px; border:1px solid red;">
   文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</div> 

CSS代码：

 .single-over{
      overflow: hidden; //超出的文本隐藏
      text-overflow: ellipsis; //溢出用省略号显示
      white-space: nowrap; //溢出不换行
    }

多行文本超出隐藏

html代码:

      <div class="multi-over" style="width:100px; border:1px solid red;">多行文本超出影藏多行文本超出影藏多行文本超出影藏多行文本超出影藏多行文本超出影藏多行文本超出影藏多行文本超出影藏多行文本超出影藏多行文本超出影藏多行文本超出影藏</div>

CSS代码：

   .multi-over{
            overflow: hidden;
            text-overflow: ellipsis;
            display:-webkit-box; //作为弹性伸缩盒子模型显示。
            -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
            -webkit-line-clamp:2; //显示的行，文本超出 显示几行
        }

应用 calc() 设置最小高度

  .set_height{
        min-height: calc(100vh - 178px);//注意减号中间要有空格
        //100vh代表当前高度，减去：如头导航占的高度，即当前盒子的高会占满除去头导航外的高度
    }