html省略号不换行,css3如何实现不换行省略号

该方法适用于所有品牌的电脑。

CSS样式修改不换行显示省略号及多行显示省略号

我们经常会在开发过程中遇到这样的需求：不换行，超出的文本显示省略号；或者是超出两行显示省略号。那么我们都知道这个功能是CSS就能实现的，但是我们可能会经常忘记这些CSS属性，或者会记得比较混乱，那么我们就来看一下怎么实现超出文本显示省略号的功能实现吧：

下面我以vue开发为例给大家上一段正常的修饰代码：

圣诞节疯狂世纪东方很顺利的反馈矢量库分段函数劳动法考核

#box{

width: 100%;

height: 100px;

background: pink;

p{

font-size: 16px;

line-height: 24px;

}

}

我们来看效果图：

下面我们做超出显示省略号：

圣诞节疯狂世纪东方很顺利的反馈矢量库分段函数劳动法考核

#box{

width: 100%;

height: 100px;

background: pink;

p{

font-size: 16px;

line-height: 24px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

}

在这里我们只加了三行代码white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

就完成了省略号的修饰样式：

这只是单行显示省略号，那多行显示省略号怎么实现呢？下面我们一起来看：

圣诞节疯狂世纪东方很顺利的反馈矢量库分段函数劳动法考核

#box{

width: 100%;

height: 100px;

background: pink;

p{

font-size: 16px;

line-height: 24px;

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

}

}

大家来看一下我们和上段代码的区别，我们把white-space: nowrap；去掉了，因为我们要显示多行文本显示省略号，所以这个不换行我们就不能使用了，下面我们有添加了：

-webkit-line-clamp: 2;限制显示文本的行数(它是webkit的私有属性，是一个不规范属性，必须结合下面两个属性一起使用才能达到效果。)

display: -webkit-box;自适应布局

-webkit-box-orient: vertical;从顶部向底部垂直布置子元素

效果图如下：