Question

我希望在3行之后切掉一段文字并显示省略号。我创建了一个Codepen来显示问题，文本也需要居中。

<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解决方案。

Answer 1

您可以使用-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/clamp-js@0.7.0/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>

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

1 个答案: