下面我将为大家详细讲解“纯CSS实现文本溢出截断省略”的几种方法,包括单行文本截断和多行文本截断。
单行文本截断
方案一:利用text-overflow属性
/* 显示省略号 */
.ellipsis1 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
使用text-overflow属性可以很方便地实现单行文本的截断并且在末尾添加省略号。其中,text-overflow: ellipsis表示末尾用省略号表示超出的内容。
方案二:利用width和overflow属性
/* 显示省略号 */
.ellipsis2 {
width: 100px;
overflow: hidden;
white-space: nowrap;
}
/* 不显示省略号 */
.no-ellipsis {
width: 100px;
overflow: hidden;
white-space: nowrap;
}
同时利用width和overflow属性可以实现单行文本的截断,如果想要在末尾添加省略号,只需要设置text-overflow属性为ellipsis,否则可以不设置。
多行文本截断
方案一:利用-webkit-line-clamp属性
.ellipsis-multiline {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
-webkit-line-clamp属性是一个WebKit私有属性,可以限制在一个块元素显示的文本的行数。该属性需要结合display属性的-webkit-box(将对象作为弹性伸缩盒子模型显示)属性和WebKit私有属性-webkit-box-orient(设置或检索伸缩盒对象的子元素的排列方式)属性一起使用。
方案二:利用纯CSS实现
.content {
position: relative;
width: 150px;
line-height: 1.2em;
overflow: hidden;
}
.content::before {
content: "...";
position: absolute;
right: 0;
bottom: 0;
}
.content::after {
content: "";
position: absolute;
right: 0;
width: 20px;
height: 1.2em;
margin-top: -1.2em;
background: #fff;
}
该方案利用了伪元素 ::before 和 ::after 来实现文本的截断。 ::before 元素添加 "...", ::after 元素使用background 属性,使省略号在文本后不会显示。
以上是实现文本溢出截断省略的几种方法并举了两个例子来介绍。希望对大家有所帮助。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:纯CSS实现“文本溢出截断省略”的几种方法 - Python技术站