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;

效果：