更新: Firefox 7(2011年9月27日リリース)からtext-overflow: ellipsis
サポートされています。わーい!私の最初の答えは歴史的な記録として続く。
Justin MaxwellはクロスブラウザCSSソリューションを持っています。ただし、Firefoxでテキストを選択できないという欠点があります。これがどのように機能するかについての完全な詳細については、マット・スナイダーのブログで彼のゲスト投稿をチェックしてください。
この手法ではinnerHTML
、Firefox のプロパティを使用して、JavaScriptでノードのコンテンツを更新することもできません。回避策については、この投稿の最後を参照してください。
CSS
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}
ellipsis.xml
ファイルの内容
<?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>
ノードコンテンツの更新
Firefoxで機能するようにノードのコンテンツを更新するには、以下を使用します。
var replaceEllipsis(node, content) {
node.innerHTML = content;
// use your favorite framework to detect the gecko browser
if (YAHOO.env.ua.gecko) {
var pnode = node.parentNode,
newNode = node.cloneNode(true);
pnode.replaceChild(newNode, node);
}
};
これがどのように機能するかの説明については、Matt Sniderの投稿を参照してください。