javascript - 网页上多行文本上的省略号 + 引号

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 解决方案:

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

div {
	position: relative;
	padding: 0 10px;
	display: inline-block;
}

div::before,
div::after {
	content: '"';
	display: inline-block;
	position: absolute;

}

div::before {
	left: 0;
}

div::after {
	right:0;
	bottom:0
}

<div>
  <span>
    small text ever!!</span>
</div>

<div>
  <span>
    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>
</div>