CSS单行文本以及多行文本溢出显示省略号解决方案

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