Php 在省略的溢出文本中添加结束引号的简单方法_Php_Css_Styles_Quote_Ellipsis

Php 在省略的溢出文本中添加结束引号的简单方法

php css

Php 在省略的溢出文本中添加结束引号的简单方法,php,css,styles,quote,ellipsis,Php,Css,Styles,Quote,Ellipsis,我有一个里面有文字的div。如果文本溢出其div，则会在结尾处用省略号缩短。我想做的是在椭圆后添加一个双引号，使其看起来像这样： “快兄弟……” 这是我的密码： <html><body> <div style="width: 100px;background: #CCCCCC;"> <div style="overflow:hidden; white-space: nowrap; text-overflow: ellipsis;">"T

我有一个里面有文字的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可以配置自定义字符，例如：

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

但是，支持是实验性的，上面的例子目前只在Firefox中有效

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

更新2015-07-29

文本溢出

现在已被所有现代浏览器采用

更新2016-07-01移动到Blink web引擎可能会破坏这一点，因为我会在Chrome上测试它-请参阅。而且它看起来在Edge中不起作用

因此，目前没有使用的跨浏览器解决方案。更糟糕的是，

功能被标记为“有风险”，因此如果“找不到可互操作的实现”，它可能会被删除。以下是我如何解决类似问题的示例，使用：before和：after伪选择器使其工作：

.truncate{
位置：相对位置；
空白：nowrap；
单词包装：打断单词；
溢出：隐藏；
显示：内联块；
文本溢出：省略号；
最大宽度：150px；
右边填充：7px；/*根据字体大小进行调整*/
}
.截断：在{
内容：“\”；
}
.截断：之后{
内容：“\”；
显示：块；
位置：绝对位置；
排名：0；
右：0；
}


敏捷的棕色狐狸跳过了懒狗

这是我发现或发现相关问题的唯一方法，似乎没有CSS解决方案：感谢@PhilipMurphy，自从我上次更新以来，

似乎在一年内不再工作。这不能满足OP要求的最终结果。