文本超出隐藏

单行文本超出隐藏

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代表当前高度，减去：如头导航占的高度，即当前盒子的高会占满除去头导航外的高度}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！