css单行及多行文字超出部分显示省略号

本文主要是介绍css单行及多行文字超出部分显示省略号，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

单行文字

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

效果:

html

<div class="container"><p>思念是一种眷恋，也是一份无奈，是最后的相信，是错过的无奈，孤独一个人的世界，藏着太多的悲伤，一个人看海，一个人想起，最后错过的爱情风雨，只是孤独的世界，苍老的年华，一个人一段繁华，藏着人生的梦，藏着最后的孤独，只是人生的错，错过爱情的包围，一个人淡泊。</p>
</div>

css

.container{width: 500px;background-color: #eee;
}.container p{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}

多行文字

多行文字实现超出部分省略号，目前只适用于webkit浏览器

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

效果：

这篇关于css单行及多行文字超出部分显示省略号的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---