html - 用省略号在多行上截断文本

This question already has answers here:

Applying an ellipsis to multiline text
                                
                                    （25个答案）
                                
                        
                                12个月前关闭。
            
                    
我想在3行后切掉一段文字并显示省略号。
我创建了一个代码笔来显示问题，文本也需要居中。

<div class="container">
  <div class="container-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
  </div>
  <div class="container-text">
    Lorem ipsum dolor sit amet
  </div>
</div>

.container {
  max-width: 300px;
  margin: 0 auto;
}
.container-text {
  border: solid 1px;
  text-align: center;
  margin-bottom: 3em;
  line-height: 18pt;
  max-height: 54pt;
  overflow: hidden;
}

https://codepen.io/gordonquinn/pen/qgrwwz

对于1行而言，这很容易实现，但要跨越多行似乎非常困难。网上有一些建议的解决方案，但没有干净/可靠的解决方案。

理想情况下，如果无法实现，则寻找纯CSS解决方案或简单的JavaScript解决方案。

最佳答案

您可以使用-webkit-line-clamp（see its support）进行操作，尽管它在IE和Firefox上不起作用

.container {
  max-width: 300px;
  margin: 0 auto;
}

.container-text {
  border: solid 1px;
  text-align: center;
  margin-bottom: 3em;
  line-height: 18pt;
  max-height: 54pt;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  display: box;
  display: -ms-flexbox;
}

<div class="container">
  <div class="container-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
  </div>
  <div class="container-text">
    Lorem ipsum dolor sit amet
  </div>
</div>

或者您可以使用clamp.js脚本

  $clamp($(".container-text")[0], {
    clamp: 3
  });

.container {
  max-width: 300px;
  margin: 0 auto;
}

.container-text {
  border: solid 1px;
  text-align: center;
  margin-bottom: 3em;
  line-height: 18pt;
  max-height: 54pt;
  overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/clamp.js"></script>

<div class="container">
  <div class="container-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
  </div>
  <div class="container-text">
    Lorem ipsum dolor sit amet
  </div>
</div>