我有一个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: '…"';
}
对于跨浏览器支持，您必须在服务器上使用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>