CSSテキストオーバーフロー省略符号

構文:
　　text-overflow : clip | ellipsis 
 
パラメータ:
clip:省略フラグは表示されません(...)、簡単な裁断です
　　
(clipというパラメータはあまり使われません!)
Ellipsis:オブジェクト内のテキストがオーバーフローしたときに省略フラグが表示されます(...)
 
説明:
省略タグを使用するかどうかを設定または取得します(...)オブジェクト内のテキストのオーバーフローを示します.
text-overflow:ellipsis属性はFFでは効果がないことに注意してください.
text-overflowプロパティは注記のみで、テキストがオーバーフローしたときに省略マークが表示されるかどうか.他のスタイル属性定義はありません.オーバーフロー時に省略記号を生成する効果を実現したい.また、テキストの行内表示(white-space:nowrap)とオーバーフローコンテンツの非表示(overflow:hidden)を強制することも定義する必要があります.このようにしてこそ、オーバーフローテキストに省略記号を表示する効果が得られます.

.ellipsis {
    width:300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}

複数のブラウザに適応するために、次のように書くことができます.

.ellipsis {
	width: 180px; 
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis; /*For Opera*/
	-ms-text-overflow: ellipsis; /*For IE8*/
	-moz-binding: url(assets/xml/ellipsis.xml#ellipsis); /*For Firefox3.x*/
}

firefoxで利用可能にするには、ellipsisとして保存すべきXULを作成する必要がある.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>

assets/xml/ellipsisに保存します.xml#ellipsisディレクトリにあります.