网页上多行文字的省略号和引号

Question

我想在一段文字周围加上引号。文本不能超过3行：如果是，则需要省略号（并且我仍然需要引号）。我附上我现在所拥有的。我的解决方案使用JS：虽然纯CSS解决方案是理想的选择，但目前可能的CSS解决方案似乎处于试验阶段或处于草稿状态（例如line-clamp）。另外，我对此解决方案不满意的是，省略号和右引号字符会重叠（如您所见，是否运行了代码段）。建议？

[...document.getElementsByTagName('div')].forEach(d => {
  if (d.scrollHeight > d.clientHeight) d.getElementsByClassName('onlyForClampedText')[0].className += " show";
})

div {
  width: 200px;
  max-height: 40px;
  margin-bottom: 20px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  //text-overflow: ellipsis;
  position: relative;
}

.onlyForClampedText {
  display: none;
}

.onlyForClampedText.show {
  position: absolute;
  right: 0;
  bottom: 0;
  display: block;
}

<div>"very short text"<span class="onlyForClampedText">"</span></div>
<div>"longer text longer text longer text longer text"<span class="onlyForClampedText">"</span></div>
<div>"longest text ever!! Really long, o so long! long long long and i'm not even finished yet lol, I could go on for like this forever, but i'll stop here"<span class="onlyForClampedText">"</span></div>

Answer 1

纯CSS解决方案：