如何使多行文本溢出，其中最后一行有省略号而不仅仅是第一行？

Question

如何使用文本溢出使"div"中的最后一行带省略号？因此，在 div 行的末尾换行，最后一行必须有省略号。另一个问题是字母没有完整地包裹起来。我得到的字母支离破碎。我需要在行尾得到完整的字母。在垂直上下文中结束整行。

.someclass {
  width: 200px;
  height:200px;
  overflow: hidden;
  text-overflow: ellipsis;   
}

<div class="someclass"> 
  AAAAAA
</div>

Answer 1

为此，您可以使用 line-clamp，检查下面更新的代码段...

在使用此解决方案之前，请检查浏览器支持

body {
  line-height: 1.5;
}

.box {
  background-color: #ddd;
  padding: 2em;
  width: 200px;
}

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

<div class="box">
  <p>Hey, don't cut me off like that. I want to speak my mind and don't appreciate being put into a box.</p>
</div>

如何使多行文本溢出，其中最后一行有省略号而不仅仅是第一行？

How to make text overflow with multiple lines where the last line have the ellipsis not just the first?

html

css

overflow