css - 使用 Css 跨浏览器方式在多行文本中添加 3 个点以阅读更多内容

Question

我有一段需要截断的多行文本。我试过这段代码，但它不能与多行一起工作，只有一行可以工作

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;

帮我找到一个跨浏览器解决方案，因为这个代码只能在 Chrome 上运行

white-space: normal;
  word-wrap: break-word;
  -webkit-line-clamp: 9;
 -moz-line-clamp: 9;
 -o-line-clamp: 9;
 -ms-line-clamp: 9;
  display: -webkit-box;

Answer 1

这是一个使用 :after 的跨浏览器解决方案。唯一需要注意的是您必须指定行高，否则省略号在 IE 中看起来会消失。这已在 IE10、FF、Chrome 和 Safari 中测试。

fiddle - http://jsfiddle.net/ez8w3u0o/4/

HTML:

<div class="too-much-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum       
</div>

CSS:

.too-much-text {
    float: left;
    display: block;
    width: 100%;
    height: 200px;
    position: relative;
    overflow: hidden;
    line-height: 20px;
}
.too-much-text:after {
     position: absolute;
     right: 0;
     bottom: 0;
     background-color: #fff;
     content: "...";
     text-align: left;
     width: 50px;  
     line-height: 20px;
}