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;

效果：