一、单行超出显示省略号

描述：如果文字超出父元素指定宽度，文字会自动换行，而连续不间断数字和英文字母（没有其他字符）不会自动换行；
详细步骤：

第一步(不换行)：white-space:nowrop;（对于连续的数字或者英文字母可省略）
第二步（溢出隐藏）overflow:hidden;
第三步（文本溢出显示省略号）text-overflow：ellipsis;(省略号)

直接看代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>单行省略号</title><style>.app {width: 400px;height: 28px;line-height: 28px;margin: 50px 0 0 50px;border: 1px solid red;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}</style>
</head>
<body><div class="app"><span class="content">你问我为何时常沉默，有的人无话可说，有的话无人可说.你问我为何时常沉默，有的人无话可说，有的话无人可说.</span></div>
</body>
</html>

效果图：

关键点：

//超出一行省略号
white-space: nowrap; //禁止换行
overflow: hidden;
text-overflow: ellipsis; //...

二、多行超出显示省略号

a.对于内核是webkit的浏览器（Google/Safari）,可以直接用CSS样式；

溢出隐藏：overflow: hidden;
省略号：text-overflow: ellipsis; display: -webkit-box;
弹性盒模型：
- 设置弹性盒子的子元素的排列方式：-webkit-box-orient: vertical;
- 设置显示文本的行数：-webkit-line-clamp: 3; (最多显示3行)

直接看代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>多行省略号</title><style>.content {display: -webkit-box;width: 400px;line-height: 1.5;margin: 50px 0 0 50px;border: 1px solid red;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}</style>
</head>
<body><div class="app"><span class="content">你问我为何时常沉默，有的人无话可说，有的话无人可说.你问我为何时常沉默，有的人无话可说，有的话无人可说.</span></div>
</body>
</html>

效果图：

关键点：

//超出两行省略号
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
line-clamp: 2;
-webkit-line-clamp: 2; //显示几行

b.兼容各种浏览器的方法
（1）利用伪类(IE6/IE7不支持)
直接看代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>多行省略号</title><style>.content {display: inline-block;width: 400px;height: 56px;line-height: 28px;margin: 50px 0 0 50px;border: 1px solid redoverflow: hidden;}.ellipsis::after{content: "...";display: inline;}</style>
</head>
<body><div class="app"><span class="content">你问我为何时常沉默，有的人无话可说，有的话无人可说.你问我为何时常沉默，有的人无话可说，有的话无人可说.</span><span class="ellipsis"></span></div>
</body>
</html>

效果图：

关键点：

//超出两行省略号.ellipsis::after{content: "...";display: inline;}

（2）利用定位和padding-right
直接看代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>desktop demo</title><style>.content {width: 400px;height: 56px;line-height: 28px;margin: 50px 0 0 50px;border: 1px solid red;overflow: hidden;padding-right: 12px; /* 留出省略号位置 */position: relative;}.ellipsis{position: absolute;right:10px;bottom: 0;}</style>
</head>
<body><div class="content">你问我为何时常沉默，有的人无话可说，有的话无人可说.你问我为何时常沉默，有的人无话可说，有的话无人可说.<span class="ellipsis">...</span></div>
</body>
</html>

效果图：

关键点：

//超出两行省略号.content {...overflow: hidden;padding-right: 12px; /* 留出省略号位置 */position: relative;}.ellipsis{position: absolute;right:10px;bottom: 0;}

CSS实现单行、多行文本溢出显示省略号（…）相关推荐

react如何省略号_react 单行多行文本溢出显示省略号...
#### 文本溢出处理 #### ##### 单行文本溢出 ##### 单行文本溢出,可直接用css处理,很简单 .ellipsis { overflow: hidden; text-overflow ...
CSS单行/多行文本溢出显示省略号(...)
1.单行文本CSS设置: { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 2.多行文本CSS设置: { over ...
css多行超出显示点_CSS实现单行、多行文本溢出显示省略号（…）
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
如何设置省略号对其序号 html,CSS实现单行、多行文本溢出显示省略号（…）
最好用max-height来限制一下web 若是实现单行文本的溢出显示省略号同窗们应该都知道用text-overflow:ellipsis属性来,固然还须要加宽度width属来兼容部分浏览.浏览器实 ...
CSS单行文本以及多行文本溢出显示省略号解决方案
CSS单行文本以及多行文本显示省略号解决方案文章目录 CSS单行文本以及多行文本显示省略号解决方案单行文本溢出显示省略号多行文本溢出显示省略号第一种效果:仅显示3行文本溢出部分显示省略号第二 ...
CSS基础：单行和多行文本溢出显示省略号
文本溢出后很多,会显示一些省略号,这个在很多网站都会这样做,从技术层次来分析有两种,一种是前端通过css或者JavaScript进行进行,还有一种是后端传递文字的时候,本身处理完长度,然后返回一个嗲有 ...
css多行文本溢出显示省略号(…)
text-overflow:ellipsis属性可以实现单行文本的溢出显示省略号(-).但部分浏览器还需要加宽度width属性. css代码: overflow: hidden; text-overf ...
css实现多行文本溢出显示省略号(…)全攻略
省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...
HTML技巧篇：如何让单行文本以及多行文本溢出显示省略号(…)
文章目录 HTML技巧篇:如何让单行文本以及多行文本溢出显示省略号(-) 一.单行文本溢出显示省略号核心css语句: 二.多行文本溢出显示省略号核心css语句: 效果图: 总结 HTML技巧篇:如 ...
纯CSS实现多行文本溢出显示省略号（兼容不同浏览器）
1.单行文本溢出显示省略号单行文本溢出显示省略号比较简单,设置white-space: nowrap避免换行,再设置text-overflow: ellipse即可. <style>.s ...

CSS实现单行、多行文本溢出显示省略号（…）

文章目录

一、单行超出显示省略号

二、多行超出显示省略号

CSS实现单行、多行文本溢出显示省略号（…）相关推荐

最新文章

热门文章