Question

我正在尝试在未定义宽度的段落中实现省略号的文本溢出。大多数示例都说明段落必须具有定义的宽度，但对于我的场景，我将无法设置指定的宽度。

下面是我试图实现的一个例子

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...

Answer 1

你能看看下面的代码吗？希望它对你有用。您可以使用 line-clamp 属性代替溢出省略号，它会在特定行数处截断文本，然后您可以根据需要更改 line-clamp 值。

请参考此链接：https://jsfiddle.net/yudizsolutions/qde6tyhs/1/

.box {
  width: 300px;
}

.box p {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

<div class="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus accumsan fermentum suscipit. Fusce porta pretium volutpat. Aenean ornare arcu non justo aliquam molestie. In venenatis in metus id accumsan. Ut porttitor lacinia massa vitae volutpat.</p>
</div>

CSS - 用省略号隐藏段落溢出

1 个答案: