文本溢出显示省略号

概述一、单行文本溢出显示省略号（...）设置块元素的宽和高，然后使用三个属性（缺一不可）控制overflow:hidden;text-overflow:ellipsis;white-space:nowrap;Demo如下：效果如下：二、多行文本溢出显示省略号（...）可以使用以下四个属性来控制：over

1、单行文本溢出显示省略号（...）

设置块元素的宽和高，然后使用3个属性（缺1不可）控制

 overflow: hIDden;

     text-overflow:ellipsis; 

     white-space:nowrap;

Demo以下：

效果以下：

2、多行文本溢出显示省略号（...）

可使用以下4个属性来控制：

overflow : hIDden;

text-overflow: ellipsis;

display: -webkit-Box;

-webkit-line-clamp: 2;

-webkit-Box-orIEnt: vertical;

-webkit-line-clamp用来限制在1个块元素显示的文本的行数。

Demo以下：

效果以下图：

但是在兼容性方面，这类方法控制多行文本溢出显示省略号，只能够兼容webkit阅读器，其他阅读器不显示省略号。

总结

以上是内存溢出为你收集整理的文本溢出显示省略号全部内容，希望文章能够帮你解决文本溢出显示省略号所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。