問題描述

我正在嘗試在 Mozilla 中獲取省略號.我發現了一些 jquery 插件，它有助于在 Mozilla 中形成省略號，但是當大量數據到來時，它無法很好地處理頁面中的形成腳本錯誤.

我認為實際上 jquery 會逐字處理每個單詞，這需要花費大量時間來執行，這是腳本錯誤的原因.是否有任何簡單的方法可以在 Mozilla 或任何可以處理大數據的 jquery 插件中顯示省略號.

請注意:自從我在這里發布原始答案后，情況發生了變化.下面詳細介紹的 hack 僅適用于 Firefix 版本 3.x.它在 FF4、5 或 6 中不工作.在這些版本的 Firefox 中沒有針對此問題的已知修復程序.

不過，省略號功能將包含在 Firefox 7 中，一兩個月后就會發布，因此您現在不必等待太久，而且他們現在已將自動更新功能添加到 Firefox 中，大多數用戶應該在新版本發布后立即遷移到它.

有關此主題的更多信息，請參閱此問題:text-overflow:ellipsis在 Firefox 4 中?(和 FF5)

我已經在下面的評論中注意到了這個警告，但由于人們仍在支持這個答案，他們可能沒有閱讀評論，所以我正在編輯答案，把它放在這里的頂部.我將在下面保留原始答案以供參考.而且它在 FF3.x 中仍然有效，所以總比沒有好.

原答案如下:

Firefox 是唯一(目前)不支持 CSS Ellipsis 功能的瀏覽器.

好消息是這是一種變通方法.它不是很出名，但確實很好用.

它通過使用一些自定義 XUL 來工作，然后使用自定義 -moz-binding 樣式聲明在樣式表中引用該 XUL.(XUL 是 Mozilla 的基于 XML 的用戶界面定義語言.整個 Firefox UI 都是用它編寫的)

首先，您需要創建一個包含 XUL 定義的文件.它應該是這樣的:

<?xml version="1.0" encoding="UTF-8"?><綁定 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"><綁定id="省略號"><內容><xul:窗口><xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description></xul:窗口></內容></綁定></綁定>

將此文件另存為 ellipsis-xbl.xml 在您的 Web 服務器上的某個位置.

然后轉到您的樣式表:

.myellipsiselement {自動換行:正常；空白:nowrap；溢出:隱藏；-moz 綁定:url(省略號-xbl.xml#ellipsis)；-o-文本溢出:省略號；文本溢出:省略號；}

顯然，將綁定的 URL 更改為您在網站上保存的任何位置.

現在，Firefox 支持省略號.耶！

您需要注意一個重要的警告:XUL 與 HTML 的不同之處在于 HTML 會忽略空格，而 XUL 不會.因為綁定意味著您的 HTML 代碼在這種情況下被有效地視為 XUL，您會發現如果您在被截斷的元素中有任何空白，它將變得可見.

這意味著如果你有這樣的 HTML，你會遇到一些奇怪的顯示問題:

這里有一些需要省略號的文本</div>

您需要將開始和結束標簽與文本移動到同一行，如下所示:

<div>這里有一些需要省略號的文本</div>

但是一旦你這樣做了，這項技術應該可以完美運行——至少在 Firefox 開始支持正常的 CSS 省略號之前......到那時，任何人都可以猜測會發生什么！

我們一直在廣泛使用這種技術，但值得稱贊的是——我們從這里了解到它:http://ernstdehaan.blogspot.com/2008/10/ellipsis-in-all-modern-browsers.html

I am trying to get ellipsis in Mozilla.I have found out some jquery plug in which helps to form ellipsis in Mozilla but when huge amount of data comes it does not handle well forming script error in the page.

I think actually the jquery handles each words by word which takes a lot of time to execute which is the cause of script error. Is there any simple way to show ellipsis in Mozilla or any jquery plug in which can handle large data.

[EDIT] Please note: Since I posted the original answer here, things have changed. The hack detailed below only works for Firefix version 3.x. It does not work in FF4, 5 or 6. There is no known fix for this issue in these versions of Firefox.

However the ellipsis feature is due to be included in Firefox 7, due out in a month or two, so you don't have too long to wait now, and with the auto-update feature they've now added to Firefox, most users should move to the new version soon after it's been released.

For more info on this topic see this question: text-overflow:ellipsis in Firefox 4? (and FF5)

I already noted this caveat below in the comments, but since people are still upvoting this answer, they may not reading the comments, so I am editing the answer to put it at the top here. I will leave the original answer in-tact below for reference. And it does still work in FF3.x, so it might be better than nothing.

Original answer follows:

Firefox is the only browser that doesn't (currently) support the CSS Ellipsis feature.

The good news is that this is a work-around. It's not very well known, but it does work nicely.

It works by using a bit of custom XUL which is then referenced in the stylesheet using the custom -moz-binding style declaration. (XUL is Mozilla's XML-based user-interface definition language. The whole of the Firefox UI is written using it)

Firstly, you'll need to create a file containing the XUL definition. It should look like this:

<?xml version="1.0" encoding="UTF-8"?>
<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>

Save this file as ellipsis-xbl.xml somewhere on your web server.

Then go to your stylesheet:

.myellipsiselement {
  word-wrap:normal;
  white-space:nowrap;
  overflow:hidden;
  -moz-binding:url(ellipsis-xbl.xml#ellipsis);
  -o-text-overflow:ellipsis;
  text-overflow:ellipsis;
}

Obviously, change the URL of the binding to wherever you've saved it on your site.

Now, firefox supports ellipsis. Yay!

There is one big caveat that you need to be aware of though: XUL is different from HTML in that HTML ignores white space, while XUL does not. Because the binding means your HTML code is effectively being treated as XUL in this instance, you will find that if you have any white space in the element being truncated, it will become visible.

This means that you will get some bizarre display problems if you have HTML like this:

<div>
  some text here that needs an ellipsis
</div>

You need to move the opening and closing tags onto the same line as the text, like so:

<div>some text here that needs an ellipsis</div>

But once you've done that, this technique should work perfectly -- at least until Firefox starts supporting the normal CSS ellipsis... at which point it's anyone's guess what will happen!

We've been using this technique extensively, but credit where it's due - we learnt about it from here: http://ernstdehaan.blogspot.com/2008/10/ellipsis-in-all-modern-browsers.html

這篇關于如何獲得文本溢出:Mozilla中的省略號類型樣式(...)的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！