9

私の目標は、左側の文字を非表示にし、省略記号も左側にすることを除いて、オーバーフローと省略記号を非表示にした要素を作成することです。これはほとんどのブラウザで機能します。

CSS：

#mydiv {
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    direction:rtl;
}

HTML：

<div id="mydiv">foobar foobar foobar</div>

#mydivがその内容よりも狭い場合、次のようになります。

... obar foobar

しかし、私が言えることから（そして、これを試みる他の人への公正な警告、私はdirection:rtl他のいくつかの場所で解決策を見たので）、これを正しく行う唯一の主要なブラウザはFirefoxのようです。SafariとGoogleChromeはどちらも省略記号をテキストの左側に配置しますが、とにかく右側を次のように切り捨てます。

... foobar foob

IE9とOperaはまったく混乱します。IEは右側で切り捨てられ、テキストが省略記号と重なるようにします。Operaは、これまでで最もクリエイティブであり、しばらくの間（つまり、要素が狭くなるにつれて）個々の単語にオーバーフローが表示され、次に左端の単語を右から切り捨て始めます。また、省略記号のレンダリングに失敗し、私が行った1つの実験では、™文字を左端まで移動しました。本当に。したがって、「foobarfoobarfoobar™」は次のようになります。

™foobfoobar

追記として、Webkitブラウザの（非常に厄介な）潜在的なオプションの1つ-webkit-rtl-ordering:visualは、左側で切り捨てる設定を行うことですが、文字通り文字を逆の順序でレンダリングすることもできます。

... boofraboof

したがって、ブラウザまたはある種のあいまいな機能をスニッフィングすることで、理論的にはそのプロパティを設定し、要素のテキストを動的に反転させることができます。

単純なクロスブラウザーの回避策、または複雑なJSベースの回避策はありますか？

4

1 に答える 1

2

あなたの問題にはJS/Jqueryベースの解決策があります。1つの注意点は、それらがより高価であるということです。ページに大量の変更を加えていない場合は、次の解決策で問題なく機能するはずです。

Dotdotdot： http ://dotdotdot.frebsite.nl/

ThreeDots http://tpgblog.com/2009/12/21/threedots-the-jquery-ellipsis-plugin/

編集：明確にするために、私はあなたが言及したのと同じ問題を見ています。

于 2012-09-26T16:39:46.203 に答える