该text-overflow:ellipsis;
CSS属性必须的几件事情,微软公司已经做了正确的网络之一。
除Firefox外,所有其他浏览器现在都支持它。
自2005年以来,Firefox开发人员一直在争论它,但是尽管有明显的需求,但他们似乎并不能真正实现它(即使是实验性的-moz-
实现也足够了)。
几年前,有人设法破解Firefox 3使其支持省略号。黑客使用该-moz-binding
功能通过XUL实施该功能。现在有很多站点都在使用此hack。
坏消息?Firefox 4 删除了该-moz-binding
功能,这意味着该黑客将不再起作用。
因此,一旦Firefox 4发布(我听说本月下旬),我们将回到不支持该功能的问题。
所以我的问题是:还有其他解决方法吗?(我试图尽可能避免使用Javascript解决方案)
[编辑]
很多赞成票,所以我显然不是唯一想知道的人,但是到目前为止,我只有一个答案,基本上是“使用javascript”。我仍然希望找到一种根本不需要JS的解决方案,或者最坏的情况是仅将其用作CSS功能无法使用的后备解决方案。因此,我将悬赏该问题,以免某个人在某个地方找到答案。
[编辑]
更新:Firefox已进入快速开发模式,但尽管现在发布了FF5,仍不支持此功能。现在,大多数用户都已从FF3.6升级,该黑客不再是解决方案。好消息告诉我,它
可能 会添加到Firefox 6中,而新版本的发布时间表应该会在短短几个月内发布。如果是这样,那么我想我可以等一下,但是他们不能尽快对它进行分类很可惜。
[最终编辑]
我看到省略号功能最终已添加到Firefox的“ Aurora Channel”(即开发版本)中。这意味着它现在应该作为Firefox
7的一部分发布,该版本将于2011年底发布。真是令人欣慰。
Spudley,您可以通过使用jQuery编写一个小的JavaScript来实现相同的目的:
var limit = 50;
var ellipsis = "...";
if( $('#limitedWidthTextBox').val().length > limit) {
// -4 to include the ellipsis size and also since it is an index
var trimmedText = $('#limitedWidthTextBox').val().substring(0, limit - 4);
trimmedText += ellipsis;
$('#limitedWidthTextBox').val(trimmedText);
}
我知道所有浏览器都应该以某种方式本机支持此功能(不使用JavaScript),但这就是我们目前所拥有的。
编辑 另外,您可以通过将一个css
类附加到所有这些固定宽度的字段上来使其更加整洁fixWidth
,然后执行以下操作:
$(document).ready(function() {
$('.fixWidth').each(function() {
var limit = 50;
var ellipsis = "...";
var text = $(this).val();
if (text.length > limit) {
// -4 to include the ellipsis size and also since it is an index
var trimmedText = text.substring(0, limit - 4);
trimmedText += ellipsis;
$(this).val(trimmedText);
}
});
});//EOF
问题内容: 自从Firefox Nightly(35.0a1)的最新(?)版本以来,我一直在使用的flexbox容器内部遇到问题,每个列的宽度为50%。 演示: 在“每晚”中,文本将泄漏到其容器外部,并且不会在末尾附加。在Chrome和Firefox稳定版中,它可以按预期工作。 问题答案: 最终可以追溯到Firefox Nightly中的最新更改。长话短说,选择器上的设置将使其按预期工作。 在这里
问题内容: 我正在查看一些代码,并看到了以下符号。我不确定这三个点的含义以及您所说的名称。 谢谢。 问题答案: 这意味着此方法可以接收多个Object作为参数。为了更好地低估,请从此处检查以下示例: 省略号(…)标识可变数量的参数,并在以下求和方法中进行了演示。 在JVM的限制内,使用所需的任意多个用逗号分隔的整数参数来调用sumsum方法。一些示例:sum(10,20)和sum(18,20,30
自最近(?)Firefox Nightly(35.0a1)的发行版我遇到了一个问题,位于flexbox容器中,该容器具有,每列宽度为50%。 演示: 在夜间,文本将泄漏到其容器外,并且不会附加
问题内容: 第二行的CSS ,这可能吗?我在网上找不到。 例: 我想要的是这样的: 但这是怎么回事: 问题答案: 工作要求是(,等)的单行版本。这意味着文本永远不会到达第二行。 嗯 在纯CSS中不可能。 编辑 如果优秀的CSS众神将实现我们可以使用(new)和(new)在纯CSS中进行模糊处理。 编辑2 WebKit / Blink具有:将省略号放在第二行。
问题内容: 我需要在可调整大小的元素内的文本中间实现省略号()。这是可能的样子。所以, 变成 当元素延伸到文本的宽度时,我希望省略号消失。如何才能做到这一点? 问题答案: 在HTML中,将完整值放在自定义data- *属性中,例如 然后分配和事件侦听器的JavaScript函数,将读取原始数据属性,并将其放置在您的跨度标签。这是省略号功能的示例: 调整值,或者如有必要,对不同的对象将其设为动态。如
问题内容: 我有一个基于flexbox的布局。两列,一列固定大小,第二列需要占用其余空间。在成长列中,我有一个字符串,希望将其剪切掉。 在Chrome中可以正常运行。但它在Firefox和IE中不起作用。我试图通过使用相对位置和绝对位置来给grow(flex item)内部元素一个宽度来修复它,但是随后我得到了一个损坏的布局。损坏与元素的高度未考虑其所有子元素有关。 注意:flex grow项目内