Question

我想使用CSS在容器的末尾裁剪文本，而不是在行的末尾裁剪文本。这是我想要的一个例子 Example

修改：我已经尝试过的

overflow: hidden; <- to hide the overflowing text
white-space: nowrap; <- seems to be necessary but also seems to be part of the problem
text-overflow: ellipsis; <- should crop the text

Example of the current state

Answer 1

您需要一个叫做Line Clamping的东西，它仅在WebKit渲染引擎中可用。您只需将以下CSS用于需要固定在最后的元素即可。

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
}

在这里，值3是在发生钳制之前要显示的行数。在此处演示效果的示例：

p {
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

<p>
  WebKit Browsers will clamp the number of lines 
  in this paragraph to 2. Lorem ipsum dolor sit amet, 
  consectetur adipisicing 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>

参考：

注意：以上链接都不属于我。 :)

如何在容器末尾裁剪文本（带省略号）

1 个答案: