html - 文本溢出问题 : ellipses in a specific height paragraph

Question

例如我有一个特定高度的段落。我希望所有超过那个高度的东西都变成省略号(...)，而不是像图片中那样将句子切成两半:

我试过使用 text-overflow: ellipses 但没用。请帮我解决这个问题。谢谢!

Answer 1

试试这段代码

div{display:block;width:300px;text-overflow:ellipsis;;overflow-y:scroll;max-height:200px;

  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
}

<div>this is text this is text this is textthis is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text</div>