我想将椭圆添加到可滚动div中包含的动态文本中。但是,我不希望文本被截断。我想要添加省略号,然后文本继续下一行。这是因为div一次只显示一行,所以省略号只是让用户知道有更多的内容,他应该点击滚动箭头继续阅读。
最好的方法是什么? ThreeDots http://tpgblog.com/threedots似乎是一个非常好的插件,有很多选项,但我只是不知道如何根据我的需要配置它。
感谢您提供任何帮助。
答案 0 :(得分:1)
为DIV提供高度,然后使用text-overflow: ellipsis
并阻止换行CSS方法。
这是一个简单的例子:
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
}
当然,总会有人制造麻烦,而这次是Firefox。您必须将文件绑定到CSS。
这比你想象的要容易。只需创建一个新的文本文件,并将其命名为ellipsis.xml。然后将其粘贴在您可以引用它的Web服务器上的任何位置。
<?xml version="1.0"?>
<bindings
xmlns="http://www.mozilla.org/xbl"
xmlns:xbl="http://www.mozilla.org/xbl"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<binding id="ellipsis">
<content>
<xul:window>
<xul:description crop="end" xbl:inherits="value=xbl:text"><children/>
</xul:description>
</xul:window>
</content>
</binding>
</bindings>
然后在你的CSS中,执行以下操作:
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}
这是快速破败,有关更多信息,请查看这个人:
http://mattsnider.com/css/css-string-truncation-with-ellipsis/
顺便说一句:如果你认为threedots插件是一个更容易的选择,我说去吧。