在椭圆形溢出文本中添加结束引号的简单方法答案

【问题标题】：Easy way to add a closing quote in an ellipsized over-flowed text在椭圆形溢出文本中添加结束引号的简单方法
【发布时间】：2013-05-12 07:43:09
【问题描述】：

我有一个 div，里面有一个文本。如果文本溢出它是 div，它会在末尾用省略号缩短。我想要做的是在它的椭圆之后添加一个双引号，使其看起来像这样：

“快哥……”

这是我的代码：

<html><body>
  <div style="width: 100px;background: #CCCCCC;">
    <div style="overflow:hidden; white-space: nowrap; text-overflow: ellipsis;">"The quick brown fox"
  </div></div>
</body></html>

是否有一种简单的方法/技术可以做到这一点，或者您是否需要创建自己的自定义省略号？

谢谢大家！

【问题讨论】：

这是我找到Change the three dots (ellipses) (…) to custom characters或Replace Excerpt Ellipsis with Permalink的唯一方法
我发现了一个相关问题，似乎没有 CSS 解决方案：link

标签： php css styles quote ellipsis

【解决方案1】：

CSStext-overflow可以配置自定义字符，例如：

.customEllipsis {
    overflow:hidden; 
    white-space: nowrap;
    text-overflow: '…"';
}

但是，支持是实验性的，上述示例目前仅在 Firefox 中有效。

对于跨浏览器支持，您必须在服务器上或使用 JavaScript 修改 PHP 中的输出（因为问题是用 PHP 标记的）。

2015 年 7 月 29 日更新 text-overflow 现在在所有现代浏览器中都是 fully supported。

2016-07-01 更新 迁移到 Blink 网络引擎可能会破坏这一点，因为我会在 Chrome 上对其进行测试 - 请参阅 this Blink defect。而且它看起来不像在 Edge 中工作。

所以目前没有使用text-overflow: <string>的跨浏览器解决方案。更糟糕的是，<string> 功能被标记为“有风险”，因此如果“未找到可互操作的实现”，它可能会被丢弃。

【讨论】：

感谢@PhilipMurphy，自从我上次更新以来，<string> 似乎已不再工作

【解决方案2】：

这是我如何解决类似问题的示例，使用 :before 和 :after 伪选择器使其工作：

.truncate {
  position: relative;
  white-space: nowrap;
  word-wrap: break-word;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  max-width: 150px;
  padding-right: 7px; /* adjust based on font size */
}
.truncate:before {
  content: "\"";
}
.truncate:after {
  content: "\"";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
}

<html>
  <body>
    <div class="truncate">The quick brown fox jumps over the lazy dog</div>
  </body>
</html>

【讨论】：

这不满足OP要求的最终结果。