如果文本超过三行，如何截断文本？答案

【问题标题】：How to truncate text, if there are more than three lines of text?如果文本超过三行，如何截断文本？
【发布时间】：2019-11-27 06:59:06
【问题描述】：

我试图将文本行限制为三行。如果用户输入的文本超过三行，我希望删除/截断第 4 行及以下的文本。

例如，如果用户键入以下内容：

<div class="example">
Lorem ipsum dolor sit amet, 
consectetur adipisicing elit. Nostrum 
dignissimos sint dolores
necessitatibus repellendus in nemo 
</div>

应该是这样的：

Lorem ipsum dolor sit amet, 
consectetur adipisicing elit. Nostrum 
dignissimos sint dolores...

https://jsfiddle.net/cliffeee/bjhvpf7q/27/

我不确定实现这一目标的最佳方法是什么。我曾尝试使用省略号，但我遇到的问题是，如果行数超过三行，它将隐藏除第 1 行之外的每一行。我希望它仅从第 4 行隐藏，然后使用 ...

【问题讨论】：

github.com/josephschmitt/Clamp.js 成功了
Applying an ellipsis to multiline text的可能重复
或者，Text overflow ellipsis on two lines 或 Pure CSS Ellipsis For Three or More Lines of Text
你还需要答案吗，还是问题已经解决了
嗨@AnmolJuneja，问题尚未完全解决，因为您建议的解决方案不适用于所有浏览器。有其他解决方案吗？

标签： c# html css razor

【解决方案1】：

你可以试试这个：

.example:after {
    content: '...';
    display: inline-block;
    color: #000;
    font-size: 20px;
    position: relative;
    top: -40px;
    left: 31px;
}
.example {
    width: 200px;
      text-overflow: ellipsis;
    overflow: hidden;
   height: 3.4em;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    padding: 0 0.5em;
}

<div class="example">
  Lorem ipsum dolor sit amet, 
  consectetur adipisicing elit. Nostrum 
  dignissimos sint dolores
  necessitatibus repellendus in nemo 
  </div>

【讨论】：

【解决方案2】：

有一种方法可以使用-webkit-line-clamp，但并非所有浏览器都支持。它也可能在未来停止工作，但现在它似乎工作得很好：

.example {
  line-height: 1.2em;
  height: 3.6em;
  width: 200px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

<div class="example">
Lorem ipsum dolor sit amet, 
consectetur adipisicing elit. Nostrum 
dignissimos sint dolores
necessitatibus repellendus in nemo 
</div>

Here 是一个非常相似的问题，但有更多答案。

【讨论】：

是的，遗憾的是并非所有浏览器都支持。根据caniuse.com 的说法，有不少人支持这一点。不幸的是，除了我觉得非常不满意的各种 hack 之外，我不知道一个干净的纯 css 替代方案。 :(
是的！顺便说一句，还有其他解决方案。
如果您知道一个好的解决方案，为什么不在这里写另一个答案呢？我期待看到这个解决方案。
@AnmolJuneja，您能否分享一下替代解决方案。此当前解决方案不适用于某些浏览器。

【解决方案3】：

你必须提供内联行高

只有在非常需要并且客户想要这个时，我才会更喜欢这个解决方案。否则我个人不使用它，因为默认情况下我们有截断选项。

所以，这取决于你。

这可以解决您的问题。

好消息是它反应灵敏:)

function countLines() {
  var el = document.getElementById('content');
  var divHeight = el.offsetHeight
  var lineHeight = parseInt(el.style.lineHeight);
  var lines = divHeight / lineHeight;
  alert("Lines: " + lines);

  if (lines > 3) {
    $(el).addClass('truncate');
  }
}

body {
  padding: 40px;
}

p.truncate {
  position: relative;
  /* Height = Lineheight x No. of lines you want truncate  */
  height: calc(20px * 3);
  overflow: hidden;
  word-break: break-all;
}

p.truncate:after {
  content: "...";
  position: absolute;
  right: 0;
  bottom: 0;
  background: white;
  padding: 0 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body onload="countLines();">

  <h2>If more than 3 lines</h2>
  <p id="content" style="line-height: 20px">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit quidem sit dolores deleniti quibusdam odit, ratione nesciunt doloremque rem, consequuntur asperiores, reiciendis dolore quam ut! Pariatur repudiandae corporis voluptate rerum autem quaerat
    aut officiis incidunt, atque, beatae, ad laborum inventore
  </p>

</body>

【讨论】：

有没有帮助？？请提出您宝贵的意见。