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

文章目录

CSS单行文本以及多行文本显示省略号解决方案
- 单行文本溢出显示省略号
- 多行文本溢出显示省略号
- - 第一种效果：仅显示3行文本溢出部分显示省略号
  - 第二种效果：仅显示3行文本溢出部分显示省略号，并且鼠标上浮显示完整文本内容
  - 第三种效果：仅显示3行文本溢出部分显示省略号，并且鼠标点击折叠箭头显示完整文本内容，点击其他位置收起完整文本内容

单行文本溢出显示省略号

先看一个单行文本溢出后显示省略号的效果，如下图所示

如果单行文本设置宽度，并设置其文本不换行样式即可实现这种效果，而对于文本宽度未知的，则已父元素的宽度为最大宽度，文本溢出的部分被隐藏并显示省略号来表示文本溢出。

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

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

HTML技巧篇：如何让单行文本以及多行文本溢出显示省略号(…)
文章目录 HTML技巧篇:如何让单行文本以及多行文本溢出显示省略号(-) 一.单行文本溢出显示省略号核心css语句: 二.多行文本溢出显示省略号核心css语句: 效果图: 总结 HTML技巧篇:如 ...
单行文本和多行文本溢出显示省略号
1.单行文本溢出显示省略号首先需要设置宽高 overflow: hidden; /*超出部分隐藏*/ text-overflow: ellipsis; /* 超出部分显示省略号 */ white-s ...
html最多显示两行,css 实现两行或多行文本溢出显示省略号（...）
1. 大家都知道,强制一行溢出显示省略号(...)的情况很简单 overflow:hidden;//超出的隐藏 text-overflow:ellipsis;//显示省略符号来代表被修剪的文本. wh ...
单行文本和多行文本溢出以省略号显示方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
css多行超出显示点_CSS实现单行、多行文本溢出显示省略号（…）
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
如何设置省略号对其序号 html,CSS实现单行、多行文本溢出显示省略号（…）
最好用max-height来限制一下web 若是实现单行文本的溢出显示省略号同窗们应该都知道用text-overflow:ellipsis属性来,固然还须要加宽度width属来兼容部分浏览.浏览器实 ...
CSS基础：单行和多行文本溢出显示省略号
文本溢出后很多,会显示一些省略号,这个在很多网站都会这样做,从技术层次来分析有两种,一种是前端通过css或者JavaScript进行进行,还有一种是后端传递文字的时候,本身处理完长度,然后返回一个嗲有 ...
css 单行文本和多行文本换行
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
css多行文本溢出显示省略号(…)
text-overflow:ellipsis属性可以实现单行文本的溢出显示省略号(-).但部分浏览器还需要加宽度width属性. css代码: overflow: hidden; text-overf ...

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