4

幅が 50px を超える文字列の一部を に置き換える関数を探しています"..."。Javascript/jQueryで実装したい。

例：

  • var="Theta Saving Non-Qualified Plan";文字列の長さを (ピクセル幅に基づいて) 制限したい変数があるとします。文字列の長さが 50px を超える場合、文字列の 51 番目のピクセルから文字列の末尾までの部分が に置き換えられ"..."ます。

アイデアはありますか？

4

5 に答える 5

2

車輪の再発明を試みないでください。次のような Jquery プラグインを使用します: http://tpgblog.com/2009/12/21/threedots-the-jquery-ellipsis-plugin/

于 2012-05-27T07:47:36.167 に答える
1

ビジュアルを切り捨てたいが、実際の文字列を切り捨てる必要がない場合の解決策は次のとおりです。

<p>
  <span style='width: 50px; height: 1em; 
        overflow: hidden; display: inline-block'>
  This is the long string which should appear truncated followed by elipses
  </span>
  <span>...</span>
</p>

IE6 および 7 で動作させるには、次の CSS を追加する必要があると思います。

zoom: 1
*display: inline;
于 2012-05-27T10:20:21.157 に答える
0

テキストが幅 50 ピクセルのブロック要素で既に囲まれている場合は、事実上すべてのブラウザーで広くサポートされているtext-overflow CSS ルールを使用できます。quirksmode の text-overflowも参照してください。

于 2012-05-27T10:27:26.220 に答える
0

これは、あなたが望むほど簡単に推測することはできません。文字または文字セットの幅はフォントサイズに依存するためです。また、テキスト幅の計算はほとんど正確ではありません。

したがって、幅よりも文字に親しみやすいインターフェイスを作成することをお勧めします。

var t = $("#div").text();
if(t.length > 50) {
    $("#div").text(t.substr(0,50)+"...");
}
于 2012-05-27T06:44:34.243 に答える
0

文字列を配列に分割し、要素の幅をテストする文字の後に文字を追加して、50px未満かどうかを確認します

すなわち：

var vElement = $('.your_element');

var vStr = vElement.html();

var vShortStr = "";

var vArray = vStr.split("");

for (var i=0; i<vArray.length; i++){

vShortStr += vArray[i];

vElement.html(vShortStr);

if(vElement.width() > 50){

    vShortStr = vShortStr.substring(0, vShortStr.length-1);

    vShortStr += "...";

    vElement.html(vShortStr);

    break;

    }

}
​
于 2012-05-27T06:55:09.923 に答える