Question

我正试图截断一段如下所示：

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel nisi 
dui. Suspendisse a massa non ante finibus tincidunt ut at arcu. In sed massa 
eget dolor faucibus rutrum. Duis in dolor id turpis fermentum volutpat. Nam 
commodo augue et erat congue pellentesque. Phasellus egestas mi massa, non 
elementum magna ornare eu. In fermen....

但是到目前为止我发现的答案使我的段落看起来像这样：

Lorem ipsum dolor sit amet, consectetur adipiscing...

我在这里想念什么？

Answer 1

如果以现代浏览器为目标，则可以尝试使用webkit-box

p {
  width: 200px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel nisi 
dui. Suspendisse a massa non ante finibus tincidunt ut at arcu. In sed massa 
eget dolor faucibus rutrum. Duis in dolor id turpis fermentum volutpat. Nam 
commodo augue et erat congue pellentesque. Phasellus egestas mi massa, non 
elementum magna ornare eu.
</p>

如何用省略号截断段落

1 个答案: