怎么通过CSS样式实现DIV元素中多行文本超长自动省略号

这篇文章主要讲解了“怎么通过CSS样式实现DIV元素中多行文本超长自动省略号”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么通过CSS样式实现DIV元素中多行文本超长自动省略号”吧！

员工经过长期磨合与沉淀，具备了协作精神，得以通过团队的力量开发出优质的产品。创新互联公司坚持“专注、创新、易用”的产品理念，因为“专注所以专业、创新互联网站所以易用所以简单”。公司专注于为企业提供成都做网站、网站设计、微信公众号开发、电商网站开发，微信小程序，软件按需制作等一站式互联网企业服务。

在CSS中，我们可以通过下面的样式实现DIV元素中文本超长后自动截断并以省略号结尾：

代码如下:

overflow: hidden;
word-break: normal;
text-overflow: ellipsis;

text-overflow: ellipsis是实现文本截断后以省略号结尾的关键样式，但问题是如果添加该样式则DIV元素内的文本无法自动换行，也就是说该效果只被允许在单行文本上实现。另外，word-break: normal可以防止文字被部分截断，这个在内容为英文的情况下显得尤其重要。

要实现多行文本自动截断以省略号结尾的效果，通常的做法是使用JavaScript脚本。下面这些文章给出了如何通过脚本进行字符串截断，不过仅限于英文环境。

http://www.barelyfitz.com/projects/truncate/

http://www.javascriptsource.com/miscellaneous/truncate-text.html

http://www.javascriptbank.com/truncate-html-text.html/en/

使用纯CSS样式来实现该效果则会稍微有些麻烦，你需要懂得如何在CSS中进行hack。这里是一个可以在多个通用浏览器中实现该效果的例子:

代码如下:

通过修改.ellipsis和.ellipsis:before样式中height属性的值来指定容器的高度。该样式的实现在多个不同版本的浏览器下测试通过，注意如果你是在IE下查看则需要确保你的文档模型必须是在标准模式下，即Document Mode必须是Standards。

感谢各位的阅读，以上就是“怎么通过CSS样式实现DIV元素中多行文本超长自动省略号”的内容了，经过本文的学习后，相信大家对怎么通过CSS样式实现DIV元素中多行文本超长自动省略号这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！