一、单行超出显示省略号
如果文字超出父元素指定宽度，文字会自动换行，而连续不间断数字和英文字母（没有其他字符）不会自动换行；
详细步骤：
- 第一步(不换行)：white-space:nowrop;（对于连续的数字或者英文字母可省略）
- 第二步（溢出隐藏）overflow:hidden;
- 第三步（文本溢出显示省略号）text-overflow：ellipsis;(省略号）
white-space: nowrap; //不换行
overflow: hidden; //超出部分隐藏
text-overflow: ellipsis; //文本溢出显示省略号二、多行超出显示 省略号
对于内核是webkit的浏览器（Google/Safari）,可以直接用CSS样式；
溢出隐藏：overflow: hidden;
省略号：text-overflow: ellipsis; display: -webkit-box;
弹性盒模型：
设置弹性盒子的子元素的排列方式 ：-webkit-box-orient: vertical;
设置显示文本的行数：-webkit-line-clamp: 5; (最多显示5行)文章来源：https://www.toymoban.com/news/detail-597457.html
overflow: hidden;//溢出隐藏
text-overflow: ellipsis;//省略号
display: -webkit-box;//
-webkit-box-orient: vertical;//设置弹性盒子的子元素的排列方式
-webkit-line-clamp: 5;//设置显示文本的行数
文章来源地址https://www.toymoban.com/news/detail-597457.html
到了这里，关于CSS实现单行或者多行文本溢出隐藏并且显示省略号的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
