многоточие + кавычки на многострочном тексте на веб-странице

Question

Я хочу поставить кавычки вокруг фрагмента текста. Текст не может превышать 3 строки: если это так, я хочу многоточие (и я все еще хочу кавычки). Я прилагаю то, что у меня есть сейчас. Мое решение использует JS: хотя чистое решение CSS было бы идеальным, возможные решения CSS в настоящее время кажутся экспериментальными или находятся в черновом состоянии (например, line-зажим ). Кроме того, что мне не нравится в этом решении, так это то, что символы многоточия и закрывающие кавычки перекрываются (как вы можете видеть, если вы запускаете фрагмент). Предложения?

[...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>