在椭圆的溢出文本中添加结束引号的简单方法 - Easy way to add a closing quote in an ellipsized over-flowed text

Easy way to add a closing quote in an ellipsized over-flowed text

我有一个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>

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

谢谢!

CSS text-overflow可以配置自定义字符，例如:

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

但是，对的支持是实验性的，上面的例子目前在Firefox中只能工作。

对于跨浏览器支持，您必须在服务器上使用PHP(因为问题标记为PHP)或在客户端使用JavaScript修改输出。

更新2015-07-29 text-overflow现在被所有现代浏览器完全支持。

更新2016-07-01这是可能的，移动到Blink网络引擎打破了这一点，因为我将在Chrome上测试它-看看这个Blink缺陷。而且它看起来不像在Edge中工作。

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

下面是我如何解决类似问题的一个例子，使用: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>