css 我怎样才能截断一些文本并用双引号括起来？

4zcjmb1e 于 2023-04-22 发布在其他

关注(0)|答案(1)|浏览(101)

我有一些文本需要用双引号括起来，如果超过两行，需要用省略号截断。不管文本是否被截断，都应该用双引号括起来。
在我的例子中-在附加的片段中，线夹css覆盖了css之后的：：。

要求：

"bla bla bla
 bla bla bl..."

我的css行为：（Ending“被...覆盖）

"bla bla bla
 bla bla bl...

.sampleText {
  width: 160px;
  font-size: 14px;
  line-height: 18px;
  quotes: "“" "”" "‘" "’";
}

.sampleText::before {
  content: open-quote;
}

.sampleText::after {
  content: close-quote;
}

.lineClamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

<html>

<body>
  <div class="sampleText lineClamp">
    The quick brown fox jumps over the lazy dog and Jived fox nymph grabs quick waltz.
  </div>
</body>

</html>

css

来源：https://stackoverflow.com/questions/76078560/how-can-i-truncate-some-text-and-wrap-it-with-double-quotes

1条答案

按热度按时间

v09wglhw1#

您可以使用相对定位来锚伪元素，这些伪元素将成为您的引号，即.sampleText上的position: relative，然后在文本前后放置的两个伪元素上使用position: absolute。
这似乎是做的把戏。

.sampleText {
  position: relative;
  width: 160px;
  font-size: 14px;
  line-height: 18px;
  quotes: "“" "”" "‘" "’";
}

.sampleText::before {
  content: open-quote;
}

.sampleText::after {
  position: absolute;
  right: 0;
  bottom: 0;
  content: close-quote;
}

.lineClamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

<html>

<body>
  <span class="sampleText lineClamp">The quick brown fox jumps over the lazy dog and Jived fox nymph grabs quick waltz.
  </span>
</body>

</html>

赞(0）回复(0）举报 2023-04-22

我来回答

css 我怎样才能截断一些文本并用双引号括起来？

1条答案

相关问题

热门标签

最新问答