如何用CSS实现带双引号的两行文本截断（解决line-clamp覆盖问题）

核心思路是把引号和文本截断容器分离，避免引号被包含在line-clamp的截断范围内。具体实现用嵌套容器：外层容器负责添加前后引号，内层容器单独做文本截断处理。

实现代码 #

HTML #

<div class="quote-text">
  <div class="truncated-content">
    这里是需要展示的文本内容，当内容超过两行时会自动截断并显示省略号，同时前后的引号始终保持可见。
  </div>
</div>

CSS #

.quote-text {
  position: relative;
  padding: 0 1em; /* 给引号留出左右空间 */
  width: 300px; /* 示例宽度，可按需调整 */
}

/* 开头引号 */
.quote-text::before {
  content: "“";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.2em;
}

/* 结尾引号 */
.quote-text::after {
  content: "”";
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 1.2em;
}

.truncated-content {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.5; /* 可按需调整行高 */
}

原理说明 #

原来的问题出在把闭合引号放在了设置line-clamp的容器伪元素里，导致引号被纳入文本截断的范围——当文本溢出时，line-clamp生成的省略号会直接覆盖末尾的引号。

通过嵌套容器拆分职责后：

• 外层容器的伪元素独立控制引号位置，完全脱离文本截断逻辑，无论文本是否溢出，引号都能固定显示在容器首尾
• 内层容器只专注于文本的两行截断，两者互不干扰

效果验证 #

• 文本不足两行时：引号正常包裹完整文本
• 文本超过两行时：文本截断显示省略号，闭合引号依然完整显示在容器右侧

内容的提问来源于stack exchange，提问作者Surya