本文主要是介绍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单行及多行文字超出部分显示省略号的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!