Html 如何截断一些文本并用双引号引起来

发布于04月22日

我有一些文本需要用双引号括起来，如果超过两行，需要用省略号截断.无论文本是否被截断，都应该用双引号括起来.

在我的例子中--在附加的代码片段中，线夹css覆盖了::After css.

Requirement:个

"bla bla bla
 bla bla bl..."

My css behavior:(结尾"被...覆盖")

"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>

推荐答案

您可以使用相对定位来锚定将成为引号的伪元素，即.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>

Html相关问答推荐

Html 如何截断一些文本并用双引号引起来

推荐答案

Html相关问答推荐

我需要两个HTML标签，以便当另一个隐藏时，一个可见，反之亦然

在CSS中不保持圆形图像形状的边框半径属性

当使用浮动标签和大小时，如何在 Select 组件中有更多可见选项？

如何使用HTML和css代码在vb.net上打印POS

如果浏览器通过http接收html，为什么客户端内置表单验证不起作用？

在css中，如何在英雄版块的标题后面做一个粘性的导航栏？

在Hero部分中同时zoom 背景图像和形状的问题

如何从多个TO中获取一个范围标记以溢出其父标记

Tailwind CSS 忽略我的元素的填充

如何将多个类名组合到CSS中的一个关键帧

伪元素：after和溢出隐藏

下划线在 Bootstrap 5 导航链接下无法正常工作

如何从 div 内的属性中提取 href 和文本

更改标签标签的大小

在