CSS单行文本以及多行文本显示省略号解决方案
文章目录
单行文本溢出显示省略号
先看一个单行文本溢出后显示省略号的效果,如下图所示
如果单行文本设置宽度,并设置其文本不换行样式即可实现这种效果,而对于文本宽度未知的,则已父元素的宽度为最大宽度,文本溢出的部分被隐藏并显示省略号来表示文本溢出。
HTML结构如下:
<div class="text-inner">
天将降大任于斯人也,必先苦其心志,劳其筋骨,饿其体肤,空乏其身,行拂乱其所为,
所以动心忍性,增益其所不能。积土成山,风雨兴焉,积水成渊,蛟龙生焉,积善成德,
而神明自得,圣心备焉,故不积硅步,无以至千里,不积小流,无以成江河,骐骥一跃,
不能十步,驽马十驾,功在不舍。
</div>
CSS样式如下:
.text-inner {
width: 500px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid rgba(0,0,0,0.1);
}
多行文本溢出显示省略号
多行文本溢出显示省略号有多种方式实现,这里只介绍三种纯CSS样式控制的效果。
下面就以仅显示3行文本为例进行分析:
第一种效果:仅显示3行文本溢出部分显示省略号
第一种效果属于完全静态的,出显示3行文本内容再无其他效果,具体实现如下:(不支持IE内核浏览器)
HTML结构:
<div class="text-inner">
天将降大任于斯人也,必先苦其心志,劳其筋骨,饿其体肤,空乏其身,行拂乱其所为,
所以动心忍性,增益其所不能。积土成山,风雨兴焉,积水成渊,蛟龙生焉,积善成德,
而神明自得,圣心备焉,故不积硅步,无以至千里,不积小流,无以成江河,骐骥一跃,
不能十步,驽马十驾,功在不舍。
</div>
CSS样式设置:
.text-inner {
width: 500px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid rgba(0,0,0,0.1);
}
第二种效果:仅显示3行文本溢出部分显示省略号,并且鼠标上浮显示完整文本内容
第二种效果是在第一种效果的基础上添加了鼠标悬浮展开效果(不支持IE内核浏览器)
HTML结构:
<div class="text-inner">
<p>
天将降大任于斯人也,必先苦其心志,劳其筋骨,饿其体肤,空乏其身,行拂乱其所为,
所以动心忍性,增益其所不能。积土成山,风雨兴焉,积水成渊,蛟龙生焉,积善成德,
而神明自得,圣心备焉,故不积硅步,无以至千里,不积小流,无以成江河,骐骥一跃,
不能十步,驽马十驾,功在不舍。
</p>
<span class="icon-arrow"></span>
</div>
CSS样式如下:
.text-inner {
position: relative;
width: 500px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
white-space: normal;
border: 1px solid rgba(0,0,0,0.1);
}
.icon-arrow {
position: absolute;
right: 5px;
bottom: 5px;
z-index: 10;
width: 10px;
height: 10px;
padding: 5px;
border-left: 2px solid #808080;
border-bottom: 2px solid #808080;
transform: rotate(-45deg);
cursor: pointer;
}
.text-inner:hover {
overflow: visible;
display: block;
}
第三种效果:仅显示3行文本溢出部分显示省略号,并且鼠标点击折叠箭头显示完整文本内容,点击其他位置收起完整文本内容
第三种效果与第二种效果类似,唯一的区别是鼠标的作用区域不同,第二种效果是鼠标悬浮触发,第三种效果是鼠标点击触发(不支持IE内核浏览器)
HTML结构如下:
<div class="text-inner">
<button class="icon-arrow"></button>
<p>
天将降大任于斯人也,必先苦其心志,劳其筋骨,饿其体肤,空乏其身,行拂乱其所为,
所以动心忍性,增益其所不能。积土成山,风雨兴焉,积水成渊,蛟龙生焉,积善成德,
而神明自得,圣心备焉,故不积硅步,无以至千里,不积小流,无以成江河,骐骥一跃,
不能十步,驽马十驾,功在不舍。
</p>
</div>
CSS 样式设置如下:
.text-inner {
position: relative;
width: 500px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
white-space: normal;
border: 1px solid rgba(0,0,0,0.1);
}
.icon-arrow {
position: absolute;
right: 5px;
bottom: 5px;
z-index: 10;
width: 10px;
height: 10px;
padding: 5px;
border-left: 2px solid #808080;
border-bottom: 2px solid #808080;
transform: rotate(-45deg);
cursor: pointer;
}
.icon-arrow:focus {
transform: rotate(135deg);
}
.icon-arrow:focus ~ p {
display: block;
overflow: visible;
}
实例源文件下载地址:https://download.csdn.net/download/Li_dengke/14926676