CSS实现单行(多行)文本超出部分用省略号显示

前言（日常废话）

该文写的是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多加薪…