前言

CSS3
文字溢出，显示省略符号需要区分情况进行处理：可分为单行和多行的情况。

单行文字溢出

假设有这样的需求，如图：

那么可以用如下代码实现：

<!DOCTYPE html>
<html>
<head>
<style>
div.test
{white-space:nowrap;
width:12em;
overflow:hidden;
text-overflow:ellipsis;
border:1px solid #000000;
}
</style></head><body><p>div中完整的内容为 "文字溢出说三遍文字溢出说三遍文字溢出说三遍" ：</p><div class="test">文字溢出说三遍文字溢出说三遍文字溢出说三遍</div></body>
</html>

实现功能的核心代码为：

div.test
{white-space:nowrap;
width:12em;
overflow:hidden;
text-overflow:ellipsis;
border:1px solid #000000;
}

说明:

white-space:nowrap;含义为段落中的文本不进行换行
width:12em;含义为div的宽度，目的是让文字显示不全（只能显示12个文字）
overflow:hidden;含义为溢出的部分就不显示了
text-overflow:ellipsis;含义为显示省略符号来代表被修剪的文本。

这些组合到一起的含义为：当文字溢出时，显示省略号。

多行文字溢出

需求是防不胜防的，有可能会遇到这样的需求：文字只显示3行，溢出文字用省略号代表，如图：

那么可以用如下代码实现：

<!DOCTYPE html>
<html>
<head>
<style>
div.test
{width:5em;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
border:1px solid #000000;
}
</style></head><body><p>div中完整的内容为 "文字溢出说三遍文字溢出说三遍文字溢出说三遍" ：</p><div class="test">文字溢出说三遍文字溢出说三遍文字溢出说三遍</div></body>
</html>

实现功能的核心代码为：

div.test
{width:5em;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
border:1px solid #000000;
}

说明:

width:5em;规定div的宽度，目的是让文字显示行数超过3行（一行只能显示5个文字）
overflow:hidden;含义为溢出的部分就不显示了
display: -webkit-box;含义为将对象作为弹性伸缩盒子模型显示。但，这是chrome/safari（-webkit)浏览器的私有属性。出了chrome/safari浏览器，可能会不好用，可能会不好用，可能会不好用。
-webkit-box-orient: vertical;含义为垂直排列，方向是从上向下。
-webkit-line-clamp: 3;含义为显示3文字。相当于变相的设置高度。

这些组合到一起的含义为：文字只显示3行，溢出文字用省略号代表。

处理英文时，需要加点料

如果用上面的方法处理英文时，当遇到长单词时会失效，比如这种：

<!DOCTYPE html>
<html>
<head>
<style>
div.test
{width:5em;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
border:1px solid #000000;
}
</style></head><body><p>div中完整的内容为 "wo shi henchanghenchangdedanci wo shi henchanghenchangdedanci wo shi henchanghenchangdedanci" ：</p><div class="test">wo shi henchanghenchangdedanci wo shi henchanghenchangdedanci wo shi henchanghenchangdedanci</div></body>
</html>

这时需要添加上下面的代码：

word-wrap:break-word;
word-break:break-all;

说明:

word-wrap:break-word;含义为不得以时，将长单词（也可以是URL）从内部进行换行
word-break:break-all;含义为不讲条件的将长单词（也可以是URL）从内部进行换行

word-break:break-all;

div.test
{width:5em;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
word-break:break-all;
border:1px solid #000000;
}

word-wrap:break-word;

div.test
{width:5em;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
word-wrap:break-word;
border:1px solid #000000;
}

使用clamp.js也可以处理文字溢出

略。

再说一下多行文字溢出

不加overflow: hidden;

指定高度

div.test
{width:5em;
height:10em;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
border:1px solid #000000;
}

参考

html在线运行https://www.runoob.com/runcode
https://www.w3school.com.cn/cssref/pr_text-overflow.asp
https://www.w3school.com.cn/cssref/pr_text_white-space.asp
https://www.cnblogs.com/linsimei/p/7273353.html
https://blog.csdn.net/u010651696/article/details/99291677
https://www.cnblogs.com/ldlx-mars/p/6972734.html
https://blog.csdn.net/chensonghuiyuan/article/details/49204747
https://blog.csdn.net/qq_26983555/article/details/80175428

【css】文字溢出，显示省略符号（...）相关推荐

css 文字溢出...显示,hover时显示隐藏文字
1.文字溢出隐藏并...显示 .tem_content_row{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 2 ...
CSS 文字溢出显示省略号
溢出显示省略号的代码:其中 1 是行数. overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-c ...
CSS 多行文字溢出显示省略号效果
.box1{width: 100px;/* height: 100px; */border: 1px solid #ccc;overflow: hidden;text-overflow: ellips ...
css文字溢出部分在另一个div显示（代码篇）
css文字溢出部分在另一个div显示博主博客: 前端代码:html.css(图文混排)文字环绕 - 案例篇以上就是关于 " css文字溢出部分在另一个div显示(代码篇) " ...
HTML+CSS：移动端分辨率、视口、Flex布局、文字溢出显示省略号、溢出两行显示省略号
文章目录一.分辨率分类二.视口三.Flex布局 3.1 justify-content 主轴对齐方式 3.2 align-items 侧轴的对齐方式 3.3 伸缩比 flex:value; 3. ...
CSS 文字溢出部分用省略号代替
1. 单行文字溢出省略只需添加三行代码即可: overflow: hidden; /* 超出的文本隐藏 */ text-overflow: ellipsis; /* 显示省略符号来代表被修剪的文本. ...
qtreewidgetitem 文字内存太长换行_table文字溢出显示省略号问题
每日金句『专注做一件事』2009 年的<麻省理工科技评论>(MIT TechnologyReview)中有一篇文章写道,人脑的带宽只有区区60比特/ 秒,是(那个年代)上网带宽的十万分之 ...
table文字溢出显示省略号问题
每日金句『专注做一件事』 2009 年的<麻省理工科技评论>(MIT TechnologyReview)中有一篇文章写道,人脑的带宽只有区区60比特/ 秒,是(那个年代)上网带宽的十万分 ...
css文本溢出显示省略号
1.单行文本溢出显示省略号 overflow: hidden;(文字长度超出限定宽度,则隐藏超出的内容) white-space: nowrap;(设置文字在一行显示,不能换行) text-overf ...

【css】文字溢出，显示省略符号（...）

前言