CSS实现内容超出省略

最新推荐文章于 2024-05-14 18:01:48 发布

指尖时光.

最新推荐文章于 2024-05-14 18:01:48 发布

阅读量89

点赞数

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.csdn.net/Ethan_zxt/article/details/130482171

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果

在这里插入图片描述

注意：父级元素要指定宽度。

css代码

/* start--文本行数限制--start */
.u-line-1 {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.u-line-2 {
	-webkit-line-clamp: 2;
}

.u-line-3 {
	-webkit-line-clamp: 3;
}

.u-line-4 {
	-webkit-line-clamp: 4;
}

.u-line-5 {
	-webkit-line-clamp: 5;
}

.u-line-2,
.u-line-3,
.u-line-4,
.u-line-5 {
	overflow: hidden;
	word-break: break-all;
	text-overflow: ellipsis;
	display: -webkit-box;
	/* 弹性伸缩盒 */
	-webkit-box-orient: vertical;
	/* 设置伸缩盒子元素排列方式 */
}
/* end--文本行数限制--end */

scss代码

/* start--文本行数限制--start */
@for $i from 1 through 5 {
  .u-line-#{$i} {
    @if $i == '1' {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    } @else {
      display: -webkit-box!important;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      -webkit-line-clamp: $i;
      -webkit-box-orient: vertical!important;
    }
  }
}
/* end--文本行数限制--end */