如何使跨浏览器css省略号？ [英] how to make cross browser css ellipsis?

问题描述

我使用这个

  p.test {
 white-space：nowrap; 
 overflow：hidden; 
 text-overflow：ellipsis;} 
  

但它不能在Firefox上工作。

解决方案

但我需要跨浏览器兼容性

/ div>

Firefox不支持它。

Firefox 3.x有一个解决方法，但在FF4中不起作用。 / p>

我被告知他们计划在FF6中添加支持。

CSS解决方案，适用于Firefox。

有关更多信息，请参阅这个问题：text-overflow:ellipsis在Firefox 4？ （和FF5）

我目前的解决方案是放弃省略号，而是做其他事情。我在文本元素的右侧使用淡出效果，给用户一个类似于省略号的视觉提示，它甚至可以与省略号组合，因此我们可以支持所有浏览器显示一些

UPDATE 按照Ilee的回答：

由于支持Firefox版本7 text-overflow：ellipsis 。因此，它是主要浏览器的交叉浏览器，如从FF7，IE7和Chrome。

I used this

p.test {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;}

but it's not working on Firefox. And I didn't check on other browsers.

But I need cross browser compatibleway

解决方案

Firefox doesn't support it.

There's a work-around for Firefox 3.x, but that also doesn't work in FF4.

I'm told that they plan to add support in FF6.

As of this moment, there is no CSS solution that works correctly for Firefox. There are some attempts that have managed to get something close, but nothing that's actually right.

For more, see also this question: text-overflow:ellipsis in Firefox 4? (and FF5)

My current solution is to give up on having an ellipsis, and do something else instead. I'm using a fade-out effect on the right-hand side of the text element to give a similar visual cue to the user as an ellipsis, and it can even be combined with an ellipsis so we can support all browsers to show some kind of effect to show a text run-on without having to resort to any browser hacks.

UPDATE as per Ilee's answer:

Since Firefox version 7 text-overflow: ellipsis is supported. Thus, it is cross browsers for major browsers like start from FF7, IE7 and Chrome.

这篇关于如何使跨浏览器css省略号？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！