Question

截断特定行上的文本（或线条钳）的最佳方法是什么？

假设我有一个包含8行文字的段落，但我只想显示3？

这可以通过CSS实现还是需要其他东西？

Answer 1

将max-height和line-height设置为您要显示的 n行的倍数。例如，如果<p class="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 </p>为30px，则只显示2行：

<强> HTML

.text {
  line-height: 30px;
  max-height: 60px;
  overflow: hidden;
}

<强> CSS

{{ }}

示例：https://jsfiddle.net/rk8y0rsd/

Answer 2

是的，很简单，请看下面的例子。

<强> HTML：

<div class="i-speak-too-much">
  Hello I like speak, I live in the future  I am the Universe
</div>

<强>的CSS：

.i-speak-too-much {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; //making dots
  }

jsfiddle：https://jsfiddle.net/ot9excbr/

截断行号N CSS上的文本

2 个答案: