前言（日常废话）
该文写的是CSS如何实现单行以及多行文本末尾的超出部分用省略号来表示。
目录
1、单行超出2、多行超出正文
现在有着一个这样的div，需要两个效果，一个是单行超出部分用省略号表示，一个是多行超出部分用省略号表示。
代码
css样式：
<style>/*初始样式*/.divStyle{position: relative;left: 1%;width: 100px;height: 90px;color: white;background-color: #132839;}</style>
html结构：
<div class="divStyle">666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666</div>
效果展示
单行超出
代码
css样式：
<style>/*单行超出*/.nowrap {/*让长段文本不换行*/white-space: nowrap;/*设置文本超出元素宽度部分隐藏*/overflow-x: hidden;/*设置文本超出部分用省略号显示*/text-overflow: ellipsis;}</style>
html结构：
<div class="divStyle nowrap">666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666</div>
效果展示
多行超出
代码
css样式：
<style>/*多行超出*/.wrap {/*让纯数字也可以换行显示*/word-break: break-all;/*将div变成弹性伸缩盒子模型display:box为display:flex的前身需要加浏览器私有属性来支持*/display: -webkit-box;/*设置或检索伸缩盒的子元素的排列方式目前所有主流浏览器都不支持box-orient属性。Firefox通过私有属性- MOZ-box-orient支持。Safari, Opera, 和 Chrome通过私有属性 -webkit-box-orient 支持.*//*值为vertical表示从顶部向底部垂直布置子元素*/-webkit-box-orient: vertical;/*设置要出现省略号的行数下面的3表示第三行出现省略号*/-webkit-line-clamp: 3;/*设置一个行高，更容易控制行数行高/元素高度=设置出现省略号的行数然后超出的部分隐藏起来 */line-height: 30px;/*超出高度的部分都隐藏起来目的主要是将设置了省略号那一行后面的内容都隐藏起来 */overflow-y: hidden;}</style>
html结构：
<div class="divStyle wrap ">666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666</div>
效果展示
写给看贴的你
本人学识短浅，如有错误以及缺漏的地方请指正批评；如有涉及侵权，请手下留情，联系本人，看见即删（手动狗头保命）。
祝各位看官大佬们身体健康、诸事顺心、仙运荣昌、少写bug多加薪…
