css超出显示省略号

单行超出

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行超出

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
/* 超出2行显示 */
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
/* 强制英文单词换行 */
word-break: break-all;

scss封装成mixin,方便使用

@mixin ellipsis($ellipsis: 1) {
	@if $ellipsis == 1 {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	} @else {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: $ellipsis;
		-webkit-box-orient: vertical;
	        word-break: break-all; /* 强制英文单词换行 */
	}
}

// 调用
@include ellipsis; // 单行
@include ellipsis(2); // 多行
posted @ 2021-01-20 19:52  老邓头3247  阅读(151)  评论(0)    收藏  举报