Firefoxのテキストオーバーフロー、すべて、すべて、すべて

一部のテキストを1行に表示する必要がある場合、多くの場合、問題が発生する可能性があります。 さらに、テキストは非常に長くなる可能性があり、通常、このテキストが配置されるブロックの幅は、少なくともブラウザーウィンドウと同じサイズによって制限されます。 これらの場合、 text-overflowプロパティが発明されました。これはCSS3勧告に含まれており、かなり前にIE6で最初に実装されました。 このプロパティがブロックに使用され、そのテキストがブロック自体よりも広い場合、テキストは切り捨てられ、末尾に省略記号が設定されます。 ここではすべてがそれほど単純ではありませんが、少し後で説明します。

Internet Explorerを使用すると、他のブラウザーはどうですか？ text-overflowプロパティは現在CSS3仕様から除外されていますが、Safariはそれをサポートしています（少なくともバージョン3では）、Operaもサポートしています（バージョン9以降、-o-overflow-textプロパティと呼ばれます）。 Firefox-いいえ、サポートしていません。第3バージョンでもサポートしていません。 悲しいけれど本当。 しかし、あなたは何かできますか？







もちろん、あなたはそれをすることができます。 このプロパティについてインターネットで検索したところ、Firefoxの場合と同様に、簡単な解決策がある記事に出会いました。 ソリューションの本質：

1. max-widthまたは単にwidthを使用して、ブロックを幅で制限します。
2. ::を使用して、省略記号（3つのドット）を含む自動生成コンテンツを作成します。

以上です。 記事の詳細を読んでください。

解決策は悪くありませんが、問題があります：

1. テキストは、文字の中央（相対的に言えば）で切り捨てることができ、その「切り株」が表示されます。
2. テキストがブロックの幅より小さい場合でも、省略記号は常に表示されます（つまり、ブロックからドロップアウトされず、省略記号は不要です）。

最初のステップ

まず、2番目の問題、つまり、不要な楕円の表示を回避する方法に焦点を当てます。 彼の頭を壊して「少し」実験して、解決策を見つけました。 説明しようと思います。

一番下の行は、省略記号付きの別のブロックが必要であるということです。これは、テキストの幅が大きくなりすぎた場合にのみ表示されます。 それから、私は落下するフローティングブロックのアイデアを思いつきました。 怖いように聞こえますが、それは単にそこにあり、右に押されるブロックを意味しますが、テキストの幅が大きくなると、テキストはブロックを次の行に押します。

練習に移りましょう。さもなければ、説明するのは難しいです。 HTML構造を設定しましょう：

     <div class = "ellipsis">
       <div>非常に長いテキスト</ div>
       <div> </ div>
     </ div>

非常にコンパクトではありませんが、小さいほど成功しませんでした。 したがって、ブロックコンテナーDIV.ellipsis、テキストを含むブロック、および省略記号を含む別のブロックがあります。 テキストをコピーするときに余分な3つのドットが必要ないため、「省略記号ブロック」は実際には空であることに注意してください。 また、追加のクラスが存在しないことを恐れないでください。この構造は、CSSセレクターによって適切に対処されます。 CSS自体は次のとおりです。

     .ellipsis
     {
      オーバーフロー：非表示。
      空白：nowrap;
      行の高さ：1.2em;
      高さ：1.2em;
      境界線：1pxの赤一色;
     }

     .ellipsis> DIV：最初の子
     {
       float：左;
     }
     .ellipsis> DIV + DIV
     {
       float：右;
      マージントップ：-1.2em;
     }
     .ellipsis> DIV + DIV ::後に
     {
      背景色：白;
      内容： '...';
     }

以上です。 Firefox、Opera、Safariが意図したとおりに動作することを確認します。 IEでは、非常に奇妙ですが、予測可能な結果が得られます。 IE6ではすべてがなくなりましたが、IE7では生成されたコンテンツをサポートしていないため、動作しません。 しかし、IEに戻ります。



それまでの間、何が行われたかを分析します。 最初に、ブロックの高さとテキスト行の高さを知る必要があるため、メインブロックの行の高さと高さを設定します。 margin-topブロックに同じ値を省略記号で設定しますが、負の値を設定します。 したがって、ブロックが次の行に「ドロップ」されない場合は、テキストの行（1行）より上になり、リセットされるとそのレベルになります（実際、それは低くなり、1行だけ引き上げられます）。 特に省略記号を表示する必要がない場合に不要な非表示を非表示にするために、オーバーフローを実行します。メインブロックでは非表示になります。 これにより、ブロックの外側（右側）にあるテキストを削除することもできます。 テキストが突然ラップしてブロックを押し下げないようにするために、ホワイトスペース：nowrapを実行し、ハイフンを禁止します-テキストは常に1行になります。 テキストを含むブロックの場合は、float：leftを設定して、ブロックを省略記号ですぐにダンプして最小幅を占有しないようにします。 両方のブロックがメインブロック（DIV.ellipsis）内でフローティング（フロート：左/右）であるため、テキストのあるブロックが空の場合、メインブロックは折りたたまれます。そのため、メインブロックの高さを固定します（高さ：1.2em）。 そして最後に、擬似要素::を使用して、省略記号を表示します。 この擬似要素では、背景を設定して、その下に表示されるテキストとオーバーラップさせます。 メインユニットのフレームを設定します。これは、ユニットの寸法を確認するためだけで、後で削除します。

Firefoxが、OperaやSafariなどの疑似要素をサポートしている場合（ポジショニング（position / floatなどのジョブ））、省略記号に別のブロックを使用しないことが可能です。 最後の3つのルールを次のものに置き換えてみてください。

     .ellipsis> DIV：最初の子::後
     {
       float：右;
      内容： '...';
      マージントップ：-1.2em;
      背景色：白;
      位置：相対;
     }

OperaとSafariを見ると、すべてが以前と同じように機能し、省略記号付きの追加ブロックはありません。 ただし、Firefoxは残念です。 しかし、私たちが決定するのは彼のためです。 さて、元のHTML構造を使用する必要があります。

第二段階

お気づきかもしれませんが、テキストがブロックに収まる場合の省略記号の外観の問題を取り除きました。 ただし、もう1つ問題があります。テキストは文字の途中で途切れます。 また、これはIEでは機能しません。 両方を克服するには、ブラウザにネイティブのテキストオーバーフロールールを使用する必要があり、Firefoxに対してのみ上記のソリューションを使用します（代替手段はありません）。 「Firefoxのみ」のソリューションを作成する方法については後ほど説明しますが、テキストオーバーフローを使用して機能するものを取得してみましょう。 CSSの調整：

     .ellipsis
     {
      オーバーフロー：非表示。
      空白：nowrap;
      行の高さ：1.2em;
      高さ：1.2em;
      境界線：1pxの赤一色; 

      テキストオーバーフロー：省略記号。
       -o-text-overflow：省略記号;
      幅：100％; 

     } 

     .ellipsis *
     {
      表示：インライン;
     }

     / * 

     .ellipsis> DIV：最初の子
     {
       float：左;
     }
     .ellipsis> DIV + DIV
     {
       float：右;
      マージントップ：-1.2em;
     }
     .ellipsis> DIV + DIV ::後に
     {
      背景色：白;
      内容： '...';
     } 

     * /

結局のところ、あまり編集しません。 本体のスタイルに3行が追加されました。 それらの2つには、テキストオーバーフローが含まれます。 IEには幅を100％に設定する必要があります。これにより、テキストがブロックを無限に押し出さず、text-overflowプロパティが機能します。 実際、幅は制限されています。 原則として、DIVはすべてのブロック要素と同様に、コンテナーの幅全体に引き伸ばされ、幅：100％は役に立たず、有害でさえありますが、IEはレイアウトの問題を抱えています。 一部のブラウザ（SafariおよびOpera）では、ブロック要素があるため、テキストオーバーフローが機能しない場合があるため、すべての内部要素もインラインにしました。 最後の3つのルールについてコメントしました。この場合、それらは必要ではなく、すべてを壊す（競合）ためです。 これらのルールは、Firefoxでのみ必要になります。

何が起こったのかを見て、続けましょう 。

第三段階

冒頭で述べたページ（この記事を書く前に）をもう一度見たとき、興味のあることを考えて、巧妙な関連アイデアの主題についてのコメントに目を通しました。 そして、コメントで、FirefoxとIEで動作する別のソリューションに関する興味深いリンクを見つけました（明らかに、この人物と最初の記事の著者には、他のブラウザーは存在しません）。 そのため、このソリューションでは、必要に応じて省略記号を挿入する必要がある要素のオーバーフローイベントとアンダーフローイベントにハンドラーを掛けることで、この現象（テキストオーバーフローの欠如）と著者は異なる方法で戦います。 悪くはありませんが、このソリューションは（リソースの点で）非常に高価なようです。 しかし、彼がこれをどのように達成したかを理解すると、興味深いことに遭遇しました。つまり、CSS -moz-bindingプロパティです。 私が理解しているように、これはIEのアナログ動作であり、ソースが異なるだけです。 ただし、詳細には触れません。この方法では、CSSを使用して要素にJavaScriptハンドラーを掛けることができるとのみ言います。 奇妙に聞こえますが、動作します。 私たちがすること：

     .ellipsis
     {
      オーバーフロー：非表示。
      空白：nowrap;
      行の高さ：1.2em;
      高さ：1.2em;
      境界線：1pxの赤一色;
      テキストオーバーフロー：省略記号。
       -o-text-overflow：省略記号;
      幅：100％; 

       -moz-binding：url（moz_fix.xml＃省略記号）;
      ズーム：1; 

     }
     .ellipsis *
     {
      表示：インライン;
     }
    

     .moz-ellipsis> DIV：最初の子 

     {
       float：左; 

      ディスプレイ：ブロック; 

     } 

     .moz-ellipsis> DIV + DIV 

     {
       float：右;
      マージントップ：-1.2em; 

      ディスプレイ：ブロック; 

     } 

     .moz-ellipsis> DIV + DIV ::後 

     {
      背景色：白;
      内容： '...';
     }

ご覧のとおり、ここでも多くの変更を加えていません。 IE7のこのステップでは、奇妙なグリッチがあります。ズームを設定しないと、すべてがゆがみます。メインユニットに1（最も簡単なオプション）を設定します。 ルール.ellipsis *または.moz-ellipsis> DIV + DIV（IE7にはまったく関係ありません）ルールを削除（削除、コメントアウト）すると、グリッチは消えます。 これはすべて奇妙です。誰かが問題を知っているなら、私に知らせてください。 それまでの間、ズーム1を回避して、Firefoxに進みます。

-moz-bindingプロパティには、省略記号識別子を含むmoz_fix.xml命令ファイルが含まれます。 このxmlファイルの内容は次のとおりです。

 <？xml version = "1.0"？>
 <bindings xmlns = "http://www.mozilla.org/xbl" xmlns：html = "http://www.w3.org/1999/xhtml">

 <binding id = "ellipsis" applyauthorstyles = "false">
	 <実装>
		 <constructor> <！[CDATA [
			 this.style.mozBinding = '';
			 this.className = this.className + 'moz-ellipsis';
		 ]]> </ constructor>
	 </ implementation>
 </ binding>

 </ bindings>

このコンストラクターが行うことは、セレクターが機能した要素にmoz-ellipsisクラスを追加することだけです。 これはFirefox（geckoブラウザー？）でのみ機能するため、moz-ellipsisクラスが要素に追加されるだけで、このクラスに追加のルールを追加できます。 彼らは何を達成しました。 this.style.mozBinding = ''の必要性についてはよくわかりませんが、表現の経験からは安全にプレイする方が良いです（一般的に私はFirefoxのこちら側に慣れていないので、誤解される可能性があります）。

この手法では外部ファイルと一般的にJavaScriptを使用することに注意してください。 怖がらないでください。 まず、ファイルがロードされず、JavaScriptが無効になって動作しない場合、大丈夫です。ユーザーは最後に省略記号が表示されず、テキストはブロックの最後で切り取られます。 つまり、この場合、「邪魔にならない」ソリューションが得られます。 あなた自身で見ることができます。



したがって、Opera、Safari、およびIEのテキストオーバーフローを実装するBig Fourブラウザーのスタイルを取得し、Firefoxでエミュレートします。

第4ステップ

この場所に終止符を打つことは可能ですが、私たちのソリューションを少し改善したいと思います。 任意のブロックにコンストラクターをハングさせて、それに応じて制御を取得できるので、それを利用してみてください。 構造を簡素化します。

     <div class = "ellipsis">非常に長いテキスト</ div>

そうそう！ あなたは私に同意すると思います-これはあなたが必要なものです！

次に、スタイルから不要なものをすべて削除しましょう。

     .ellipsis
     {
      オーバーフロー：非表示;
      空白：nowrap;
      行の高さ：1.2em;
      高さ：1.2em;
      テキストオーバーフロー：省略記号。
       -o-text-overflow：省略記号;
      幅：100％;
       -moz-binding：url（moz_fix.xml＃省略記号）;
     }

     .moz-ellipsis> DIV：最初の子
     {
       float：左;
     }
     .moz-ellipsis> DIV + DIV
     {
       float：右;
      マージントップ：-1.2em;
     }
     .moz-ellipsis> DIV + DIV ::後
     {
      背景色：白;
      内容： '...';
     }

最後に赤いフレームを削除しました:)

そして、moz_fix.xmlを少し追加しましょう。

 <？xml version = "1.0"？>
 <bindings xmlns = "http://www.mozilla.org/xbl" xmlns：html = "http://www.w3.org/1999/xhtml">

 <binding id = "ellipsis" applyauthorstyles = "false">
	 <実装>
		 <constructor> <！[CDATA [
			 （関数（ブロック）{
				 setTimeout（関数（）{
					 block.style.mozBinding = '';
  					 var t = document.createElement（ 'DIV'）;
					 while（block.firstChild）
				  		 t.appendChild（block.firstChild）;
					 block.appendChild（t）;
					 block.appendChild（document.createElement（ 'DIV'））;
					 block.className = block.className + 'moz-ellipsis';
				 }、0）;
			 }）（this）;
		 ]]> </ constructor>
	 </ implementation>
 </ binding>

 </ bindings>

ここで何が起こっていますか？ 最初のHTML構造を再作成します。 つまり、ブロックに関するこれらの問題は、Firefoxでのみ自動的に行われます。 JavaScriptコードは最高の伝統で書かれています:)

残念ながら、手紙の途中でテキストが途切れる状況を避けることはできません（ただし、おそらく、一時的に、私の決定はまだ非常に粗雑であり、将来的には解決する可能性があります）。 しかし、この効果を少し滑らかにすることができます。 これを行うには、画像（透明なグラデーションのある白い背景）とスタイルのいくつかの変更が必要です。

     .moz-ellipsis> DIV：最初の子
     {
       float：左; 

      マージン右：-26px; 

     }
     .moz-ellipsis> DIV + DIV
     {
      フロート：右;
      マージントップ：-1.2em; 

      背景：url（ellipsis.png）repeat-y;
      パディング左：26px; 

     }

私たちは人生を見て楽しんでいます。



これで終わります。

おわりに

サードパーティのレイアウトの小さな例を示します。 Wikipediaページの 1つ（最初に表示されたページ ）の目次を取得し、上記の方法を適用しました。

一般に、このソリューションは、ストレッチを使用する場合にのみユニバーサルと呼ぶことができます。 それはすべて、レイアウトとその複雑さに依存します。 ファイルまたはタンバリンが必要になる場合があります。 ほとんどの場合、うまくいくと思います。 そして、あなたは今出発点を持っています;）

この記事から、おもしろくて便利なことを学んだことを願っています。

頑張って