Mozillaで省略記号を取得しようとしています。Mozillaで省略記号を形成するのに役立つjqueryプラグインを見つけましたが、大量のデータが来ると、ページでのスクリプトエラーの形成をうまく処理できません。
実際、jqueryは単語ごとに処理するため、実行に時間がかかり、スクリプトエラーの原因になると思います。Mozillaまたは大きなデータを処理できるjqueryプラグインで省略記号を表示する簡単な方法はありますか?
Mozillaで省略記号を取得しようとしています。Mozillaで省略記号を形成するのに役立つjqueryプラグインを見つけましたが、大量のデータが来ると、ページでのスクリプトエラーの形成をうまく処理できません。
実際、jqueryは単語ごとに処理するため、実行に時間がかかり、スクリプトエラーの原因になると思います。Mozillaまたは大きなデータを処理できるjqueryプラグインで省略記号を表示する簡単な方法はありますか?
[編集]注意:ここに元の回答を投稿してから、状況が変わりました。以下に詳述するハックは、Firefixバージョン3.xでのみ機能します。FF4、5、または6では機能しません。これらのバージョンのFirefoxでは、この問題に対する既知の修正はありません。
ただし、省略記号機能はFirefox 7に含まれる予定であり、1〜2か月後にリリースされる予定です。そのため、今すぐ待つ必要はありません。また、Firefoxに追加された自動更新機能により、ほとんどのユーザーがリリース後すぐに新しいバージョンに移行する必要があります。
このトピックの詳細については、次の質問を参照してください:Firefox 4のtext-overflow:ellipsis?(およびFF5)
コメントでこの警告をすでに指摘しましたが、人々はまだこの回答に賛成しているため、コメントを読んでいない可能性があるため、ここで回答を編集して一番上に配置しています。参考までに、元の回答はそのままにしておきます。また、FF3.xでも機能するため、何もないよりはましかもしれません。
元の答えは次のとおりです。
Firefoxは、(現在)CSS省略記号機能をサポートしていない唯一のブラウザです。
良いニュースは、これが回避策であるということです。あまり知られていませんが、うまく機能します。
これは、カスタムXULのビットを使用して機能し、カスタムXULは、カスタム-moz-bindingスタイル宣言を使用してスタイルシートで参照されます。(XULはMozillaのXMLベースのユーザーインターフェイス定義言語です。FirefoxUI全体はそれを使用して記述されています)
まず、XUL定義を含むファイルを作成する必要があります。次のようになります。
<?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>
このファイルをellipsis-xbl.xmlWebサーバーのどこかに保存します。
次に、スタイルシートに移動します。
.myellipsiselement {
word-wrap:normal;
white-space:nowrap;
overflow:hidden;
-moz-binding:url(ellipsis-xbl.xml#ellipsis);
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
}
明らかに、バインディングのURLを、サイトに保存した場所に変更します。
現在、Firefoxは省略記号をサポートしています。わーい!
ただし、注意が必要な大きな注意点が1つあります。XULはHTMLとは異なり、HTMLは空白を無視しますが、XULは無視しません。この場合、バインディングはHTMLコードが効果的にXULとして扱われていることを意味するため、切り捨てられている要素に空白があると、それが表示されることがわかります。
これは、次のようなHTMLを使用している場合、奇妙な表示の問題が発生することを意味します。
<div>
some text here that needs an ellipsis
</div>
次のように、開始タグと終了タグをテキストと同じ行に移動する必要があります。
<div>some text here that needs an ellipsis</div>
しかし、一度それを行うと、この手法は完全に機能するはずです-少なくともFirefoxが通常のCSS省略記号のサポートを開始するまでは...その時点で、何が起こるかは誰にもわかりません!
私たちはこの手法を幅広く使用してきましたが、それが正当な理由であると信じています-ここからそれについて学びました:http://ernstdehaan.blogspot.com/2008/10/ellipsis-in-all-modern-browsers.html