文本单行  溢出省略

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

这是一行文本溢出隐藏，这是一行···

文本最多两行溢出隐藏显示省略号

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

这是一行文本溢出隐藏，这是一行文本溢出隐
藏，这是一行文本溢出隐藏，这是一行文本···

--------------------------注释---------------------------
overflow: hidden;/设置隐藏溢出元素
text-overflow: ellipsis;//显示省略符号来代表被修剪的文本。//clip修剪文本//string 使用给定的字符串来代表被修剪的文本。
display: -webkit-box;//对象作为弹性伸缩盒子模型显示 
-webkit-line-clamp: 2;//溢出省略的行数
-webkit-box-orient: vertical;/设置或检索伸缩盒对象的子元素的排列方式 

强制换行

text{
	white-space: pre-line;
	word-break: break-all;
	word-wrap: break-word;
}

关于overflow: hidden

这里我们需要注意到一点：这里的overflow并不是设置为父级元素div的属性，而是p标签的属性，需要和overflow的普通用法区分开来

1. overflow：hidden的普通用法：用在块级元素（例如div）的外层隐藏内部溢出元素
2. overflow: hidden的特殊用法：在上述例子中配合text-overflow: ellipsis;white-space: nowrap;实现p元素隐藏自身的溢出并设置（...）的效果

关于text-overflow: ellipsis;

这一属性依赖于overflow: hidden存在，只有设置了overflow:hidden它才是能够生效的，你可以把它看作overflow对于文本溢出隐藏的一种‘特殊样式’

关于white-space: nowrap

它的作用是让文本不换行，这是overflow:hidden和text-overflow：ellipsis生效的基础！没有它overflow:hidden和text-overflow：ellipsis无法生效！（在单行文本溢出省略这一案例中）

分享到：

打赏