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

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>