2

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

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

谢谢大家！

4

2 回答 2

5

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

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

但是，支持是实验性的，上面的示例目前仅适用于 Firefox。

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

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

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

所以目前没有使用text-overflow: <string>. 它变得更糟，因为该<string>功能被标记为“有风险”，因此如果“找不到可互操作的实现”，它可能会被丢弃。

于 2013-05-17T07:58:59.050 回答
0

这是我如何解决类似问题的示例，使用 :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>

于 2018-09-08T16:39:25.727 回答