text-overflow：Firefox 4の省略記号？ （およびFF5）
text-overflow:Ellipsis; CSSプロパティは、MicrosoftがWeb用に行った数少ないものの1つでなければなりません。
Firefoxを除く他のすべてのブラウザでサポートされています。
Firefox開発者は 2005年以降議論している しかし、それに対する明らかな需要にもかかわらず、彼らは実際にそれを実装するようには思われない（実験的な-moz-実装でさえ十分だろう） ）。
数年前、誰かが EllipsisをサポートするためにFirefox 3をハックする の方法を考え出しました。ハックは-moz-binding機能を使用してXULを使用して実装します。現在、かなりの数のサイトがこのハックを使用しています。
悪いニュースは？ Firefox 4は -moz-binding機能を削除 です。つまり、このハックはもう機能しません。
そのため、Firefox 4がリリースされるとすぐに（今月のことですが）、この機能をサポートできないという問題に戻ります。
だから私の質問は次のとおりです：これを回避する他の方法はありますか？ （可能な限りJavascriptソリューションにフォールバックしないようにしています）
[編集]
多くの賛成票があるので、知りたいと思うのは明らかに私だけではありませんが、基本的に「javascriptを使用する」という答えが1つあります。私はまだJSをまったく必要としないか、最悪の場合はCSS機能が機能しないフォールバックとしてのみ使用するソリューションを望んでいます。だから、私は質問に、誰かがどこかで答えを見つけたという偶然に報奨金を掲示します。
[編集]
更新：Firefoxはラピッド開発モードに入りましたが、FF5が現在リリースされているにもかかわらず、この機能はまだサポートされていません。そして今、大多数のユーザーがFF3.6からアップグレードしたため、ハックはもはや解決策ではありません。嬉しいことに、mightがFirefox 6に追加され、新しいリリーススケジュールで数か月以内にリリースされるはずです。もしそうなら、私はそれを待つことができると思うが、それは彼らがもっと早くそれを分類することができなかったのは残念だ。
[最終編集]
Ellipsis機能が最終的にFirefoxの「Aurora Channel」（開発バージョン）に追加されたようです。これは、Firefox 7の一部としてリリースされる予定であることを意味し、2011年末にリリースされる予定です。
ここで利用可能なリリースノート： https://developer.mozilla.org/en-US/Firefox/Releases/7
Spudley、jQueryを使用して小さなJavaScriptを記述することで同じことを実現できます。
var limit = 50;
var Ellipsis = "...";
if( $('#limitedWidthTextBox').val().length > limit) {
// -4 to include the Ellipsis size and also since it is an index
var trimmedText = $('#limitedWidthTextBox').val().substring(0, limit - 4);
trimmedText += Ellipsis;
$('#limitedWidthTextBox').val(trimmedText);
}
すべてのブラウザがこれをネイティブに（JavaScriptを使用せずに）サポートする何らかの方法が必要であることを理解していますが、この時点でそれがあります。
[〜＃〜] edit [〜＃〜]また、cssクラスをすべての固定幅フィールド、たとえばfixWidthにアタッチすることで、よりきれいにすることができます。次に、次のようなことを行います。
$(document).ready(function() {
$('.fixWidth').each(function() {
var limit = 50;
var Ellipsis = "...";
var text = $(this).val();
if (text.length > limit) {
// -4 to include the Ellipsis size and also since it is an index
var trimmedText = text.substring(0, limit - 4);
trimmedText += Ellipsis;
$(this).val(trimmedText);
}
});
});//EOF
2011年9月30日編集
FF7がリリースされました。 このバグ は解決され、動作します！
EDIT 08/29/2011
この問題は resolved としてマークされ、FF 7で利用可能になります。現在、2011年9月27日にリリースする予定です。
カレンダーにマークを付けて、配置したハックをすべて削除する準備をします。
[〜＃〜] old [〜＃〜]
別の答えがあります：wait。
FF開発チームはこの問題を解決するために熱心に取り組んでいます。
Firefox 6の暫定修正セットがあります。
Firefox 6!!いつそれが出るの？！？
そこに簡単に、想像上の、過敏な人。 Firefoxは開発中です。 FF6は、Firefox 5の6週間後にリリースされる予定です。Firefox5は、2011年6月21日にリリースされる予定です。
そのため、2011年8月の初めに修正が行われます...うまくいけば。
元の投稿者の質問のリンクからのバグに続いて、メーリングリストにサインアップできます。
または、 ここをクリック ;最も簡単な方。
先週も gremlin に遭遇しました。
受け入れられたソリューションは可変幅フォントを考慮せず、wwwhackのソリューションにはWhileループがあるため、$。02を投入します。
クロス乗算を使用することで、問題の処理時間を大幅に短縮することができました。基本的に、次のような式があります。
この場合の変数xは、解決する必要があるものです。整数として返されると、オーバーフローテキストの新しい長さが返されます。 MaxLengthに80％を掛けて、楕円に十分な表示スペースを与えました。
完全なhtmlの例を次に示します。
<html>
<head>
<!-- CSS setting the width of the DIV elements for the table columns. Assume that these widths could change. -->
<style type="text/css">
.div1 { overflow: hidden; white-space: nowrap; width: 80px; }
.div2 { overflow: hidden; white-space: nowrap; width: 150px; }
.div3 { overflow: hidden; white-space: nowrap; width: 70px; }
</style>
<!-- Make a call to Google jQuery to run the javascript below.
NOTE: jQuery is NOT necessary for the ellipses javascript to work; including jQuery to make this example work -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Loop through each DIV element
$('div').each(function(index) {
var myDiv = this; //The original Div element which will have a nodeType of 1 (e.g. ELEMENT_NODE)
var divText = myDiv; //Variable used to obtain the text from the DIV element above
//Get the nodeType of 3 (e.g. TEXT_NODE) from the DIV element. For this example, it will always be the firstChild
divText = divText.firstChild;
//Create another variable to hold the display text
var sDisplayText = divText.nodeValue;
//Determine if the DIV element is longer than it's supposed to be.
if (myDiv.scrollWidth > myDiv.offsetWidth) {
//Percentage Factor is just a way of determining how much text should be removed to append the ellipses
//With variable width fonts, there's no magic number, but 80%, should give you enough room
var percentageFactor = .8;
//This is where the magic happens.
var sliceFactor = ((myDiv.offsetWidth * percentageFactor) * sDisplayText.length) / myDiv.scrollWidth;
sliceFactor = parseInt(sliceFactor); //Get the value as an Integer
sDisplayText = sDisplayText.slice(0, sliceFactor) + "..."; //Append the ellipses
divText.nodeValue = sDisplayText; //Set the nodeValue of the Display Text
}
});
});
</script>
</head>
<body>
<table border="0">
<tr>
<td><div class="div1">Short Value</div></td>
<td><div class="div2">The quick brown fox jumps over the lazy dog; lots and lots of times</div></td>
<td><div class="div3">Prince</div></td>
</tr>
<tr>
<td><div class="div1">Longer Value</div></td>
<td><div class="div2">For score and seven year ago</div></td>
<td><div class="div3">Brown, James</div></td>
</tr>
<tr>
<td><div class="div1">Even Long Td and Div Value</div></td>
<td><div class="div2">Once upon a time</div></td>
<td><div class="div3">Schwarzenegger, Arnold</div></td>
</tr>
</table>
</body>
</html>
これはJSのみの修正であると理解していますが、Mozillaがバグを修正するまで、CSSソリューションを思い付くほど賢くありません。
グリッドがアプリケーションにロードされるたびにJSが呼び出されるため、この例が最適です。各グリッドの列幅はさまざまであり、Firefoxユーザーがアプリを表示するコンピューターの種類を制御することはできません（もちろん、制御するべきではありません： ））。
私のアプリケーションで唯一のブラウザー固有のハックがFF4をサポートすることであることに少し失望していると言わなければなりません。上記のJavaScriptソリューションは、可変幅フォントを考慮していません。これを説明するより詳細なスクリプトを次に示します。このソリューションの大きな問題は、コードの実行時にテキストを含む要素が非表示になっている場合、ボックスの幅がわからないことです。これは私にとって契約違反であったため、作業/テストを停止しました...しかし、誰かに役立つ場合はここに投稿すると思いました。私のテストは網羅的ではなかったため、必ずテストしてください。ブラウザチェックを追加して、FF4のコードのみを実行し、他のすべてのブラウザで既存のソリューションを使用できるようにしました。
これはここでいじることに利用できるはずです： http://jsfiddle.net/kn9Qg/130/
HTML：
<div id="test">hello World</div>
CSS：
#test {
margin-top: 20px;
width: 68px;
overflow: hidden;
white-space: nowrap;
border: 1px solid green;
}
Javascript（jQueryを使用）
function ellipsify($c){
// <div $c> content container (passed)
// <div $b> bounds
// <div $o> outer
// <span $i> inner
// </div>
// <span $d></span> dots
// </div>
// </div>
var $i = $('<span>' + $c.html() + '</span>');
var $d = $('<span>...</span>');
var $o = $('<div></div>');
var $b = $('<div></div>');
$b.css( {
'white-space' : "nowrap",
'display' : "block",
'overflow': "hidden"
}).attr('title', $c.html());
$o.css({
'overflow' : "hidden",
'width' : "100%",
'float' : "left"
});
$c.html('').append($b.append( $o.append($i)).append($d));
function getWidth($w){
return parseInt( $w.css('width').replace('px', '') );
}
if (getWidth($o) < getWidth($i))
{
while (getWidth($i) > (getWidth($b) - getWidth($d)) )
{
var content = $i.html();
$i.html(content.substr(0, content.length - 1));
}
$o.css('width', (getWidth($b) - getWidth($d)) + 'px');
}
else
{
var content = $i.html();
$c.empty().html(content);
}
}
次のように呼び出されます。
$(function(){
ellipsify($('#test'));
});
この純粋なCSSソリューション は、すべての行の後に省略記号が表示されるという事実を除いて、本当に近いです。