html - CSS - 限制行数或字符数

Question

我尝试限制行数或以其他方式限制文本的长度，以免我的 CSS 失败，

我试试这个方法:

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

(这删除了我在文章下方“阅读更多”的按钮

我也尝试了设置最大高度和显示的方式:隐藏 block 和溢出但它移动其他元素(文章)很远。

但就是不知道如何修复它。

完整代码可以在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;
}