オーバーフローテキストは省略番号を表示します.text-overflow:ellipsiのことについて.

オリジナル:http://leeiio.me/text-overflow-ellipsis/Default.aspx?__tencentip=172.30.2149&u_tencentid=1&u_tencentrawurl=http://leeiio.me/text-overflow-ellipsis/

このタイトルはもうありふれた問題です.多くの場合、たとえばサイトの基本的な文章リストは、タイトルが長くなりますが、リストを表示する範囲の幅はこんなに広くないです.基本的には、サイトのバックグラウンドプログラムで一定の文字を切り取ってフロントに出力したり、デスクでjavascriptで一定の文字を切り取ったりしますが、文字数を制御することによって切り取ると大きな問題があります.それならもっといい方法がありますか?例えば直接CSSで解決します.もちろんあります.
text-overflowは特殊な属性で、W 3 C以前の文書(現在の文書にはtext-overflow属性が含まれていません.FML!)の定義は以下の通りです.
Name:text-overflow-mode
Value:clip|ellipsi𞓜ellipsi-word
clip:省略マークは表示されませんが、簡単な裁断です.
ellipsi:オブジェクト内のテキストがオーバーフローしたときに省略マーク(…)が表示されます.省略マークが挿入された位置は最後の文字です.
ellipspis-word:オブジェクト内のテキストがオーバーフローしたときに省略マークを表示します.省略マークを挿入した位置は最後のワードです.
なぜ最初はtext-overflowは特別なデザインだと言いましたか?私たちは通常使っているタイトルの代わりに使ってもいいです.そして、このようにして検索エンジンにもっと友好的です.例えば、タイトルファイルには50の漢字があります.私たちのリストは300 pxの幅しかないかもしれません.タイトルで関数を切り取ると、タイトルは完全ではありません.CSSスタイルtext-overflow:ellipsiを使えば、出力されたタイトルは完全で、コンテナサイズの制限を受けて表示されないだけです.
text-overflow:ellipsi属性はコメントのみで、テキストがオーバーフローした時に省略マークが表示されますか?他のスタイル属性の定義はありません.私たちはオーバーフローを実現するためには、省略された効果があります.また、定義が必要です.強制テキストは一行内に表示されます.また、オーバーフロー内容は隠しです.オーバーフローテキストの省略記号表示効果を実現するには、このような方法しかありません.Via.
それなら、私達はpラベルにtext-overflowを定義するなら、ellipsiはこのように書くことができます.

p {
      white-space: nowrap;
      width: 100%;                  /* IE6        */
      overflow: hidden;             
 
      -o-text-overflow: ellipsis;    /* Opera */
      text-overflow:    ellipsis;    /* IE, Safari (WebKit) */
   }

スタイルを使う前:
私はテストテキストです.それぞれIE、Safari、chrome、operaブラウザで私を見てください.
スタイルを使用した後:
私は長いテストテキストです.それぞれIE、Safari、chrome、operaブラウザで確認してください.ハハハ、省略記号を見ましたか?
ブラウザ対応状況
Browser Lowest Version Support of
Internet Explorer 6.0 text-overflow
Firefox(Gecko)——
Opera 9.0-o-text-overflow
Safari(WebKit)1.3(312.3)text-overflow
OH,FMLFirefoxはこの属性をサポートしていません.今回は、Firefoxも変わっていますよね.他の方法がありますか?もちろんあります.方法はまだ多いです.
例えばMozilla developerセンターが推奨する-moz-binding CSS属性です.Mozilla developer centerはtext-overflowがW 3 Cの仕様を持っていないという理由を与えました.しかし、FirefoxはXULをサポートしていますので、XMLのユーザーインターフェース言語です.また、FirefoxはXBLをサポートしています.XMLバインディング言語で、Mozila developerセンター推薦のmoz-binding CSS属性を使用して、XUL内のellipsi属性をバインドすることができます.
1.XUL方式はまず、XULを作成し、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>

それから私たちはこのxmlファイルをカタログに入れたいです.元のcssはもう一つ追加しなければなりません.こうなります.

p {
      white-space: nowrap;
      width: 100%;                  /* IE6        */
      overflow: hidden;             
 
      -o-text-overflow: ellipsis;    /* Opera */
      text-overflow:    ellipsis;    /* IE, Safari (WebKit) */
      -moz-binding: url('ellipsis.xml#ellipsis');    /* Firefox */
   }

FirefoxはXULによりellipsiを実現したが、以下のような問題に注意する必要がある.
1.XULで処理されたテキストは選択できなくなります.本来ならば、moz-user-select:textです.属性はテキストの選択を許可しますが、テストは成功しませんでした.
2.親要素にXULを結び付けると、サブ要素の内容が見えなくなります.たとえば:
It is a longha long long long text!
もしあなたがpノードにXULをバインドしただけであれば、Firefoxの下ではhahahaというコンテンツが見えなくなります.
そのソースコードは実際には:
＜p＞It is a long＜em＞hahaha＜em＞long long long long text!p>
参考資料:
http://www.w3.org/TR/2003/CR-css3-text-20030514/
http://www.quirksmode.org/css/contents.html
https://bugzilla.mozilla.org/show_bug.cgi?id=312156
https://developer.mozilla.org/En/XUL
https://developer.mozilla.org/En/XUL/Description
http://www.rikkertkoppes.com/thoughts/2008/6/
http://www.w3.org/TR/xbl/
http://www.w3.org/TR/css3-text/
2.Javascript方式はXULがFirefoxにおける文字オーバーフロー表示を完璧に解決できない以上、javascriptを助けましょう.もちろん、古い文字を一定数切り取って実現するのではありません.
ここではjQueryを例にとって、コードは以下の通りです.

(function($) {
	$.fn.ellipsis = function(enableUpdating){
		var s = document.documentElement.style;
		if (!('textOverflow' in s || 'OTextOverflow' in s)) {
			return this.each(function(){
				var el = $(this);
				if(el.css("overflow") == "hidden"){
					var originalText = el.html();
					var w = el.width();
 
					var t = $(this.cloneNode(true)).hide().css({
                        'position': 'absolute',
                        'width': 'auto',
                        'overflow': 'visible',
                        'max-width': 'inherit'
                    });
					el.after(t);
 
					var text = originalText;
					while(text.length > 0 && t.width() > el.width()){
						text = text.substr(0, text.length - 1);
						t.html(text + "...");
					}
					el.html(t.html());
 
					t.remove();
 
					if(enableUpdating == true){
						var oldW = el.width();
						setInterval(function(){
							if(el.width() != oldW){
								oldW = el.width();
								el.html(originalText);
								el.ellipsis();
							}
						}, 200);
					}
				}
			});
		} else return this;
	};
})(jQuery);

このjsの原理はとても簡単で、幅を比較して、1つずつ文字の幅を短縮して、最後の幅が適当な時、循環を停止して、文字オーバー表示…の効果を実現しました.
このjsはまだ一つのcssが必要です.

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

jsでは、スタイルにtext-overflowや-o-text-overflowがある場合は、このjsは実行されないという判断があります.この二つの属性をサポートするブラウザは自分でellipsi効果を実現できるからです.
これらの2つの方法は、Firefoxにおけるellipsiの効果をどのように取捨選択して使用するか、具体的には、あなたが運用するプロジェクトの具体的な状況に基づいて具体的に分析しなければならない.
他の方法については、ネットでも見られます.例えば、after疑似類を使って実現するなど、個人的には紹介しないので、ここで詳しく説明しません.もっといい方法があれば、私と共有してほしいです.ありがとうございます.
作者:レシオ
原文のリンク:
オーバーフローテキストは省略番号を表示します。text-overflow:ellipsiのことについて。