CSS - 限制行数或字符数

Question

我尝试限制行数或其他方式限制文本不会使CSS失效的时间，

我试着用：

#article-container p {
    padding: 0 10px 0 0;
    margin:0;
    display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;  
}

（将我的按钮移至＆＃34;阅读更多＆＃34;在文章下面

我也尝试使用set max-height和display：block和overflow hidden，但它会远离其他元素（文章）。

但只是不知道解决它的问题。

可以在FIDDLE

上找到整个代码

Answer 1

http://fiddle.jshell.net/TA78y/6/

#article-container p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 168px;
}

#article-container p.more {
    overflow: hidden;
    padding: 0;
    white-space: normal;
    width: auto;
}

Answer 2

减少＃article-container p

的使用

#article-container p {
padding: 0 10px 0 0;
margin: 0;
width: 210px; //reduce the width
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}