長すぎる文字列を「...」に置換する

Question

<div style="width:100px;">This text is too long to fit</div>

divのテキストは動的です。そして、テキストを幅に合わせて壊さないようにしたいと思います。 テキストが収まるかどうかをテストするには何らかの機能が必要です。そうでない場合は、実際に収まるテキストの部分を表示したいと思います。最後に...を追加します。長すぎるテキストの

結果は次のようなものでなければなりません："This text is..."

は私が何をしたいことのいくつかの標準的な方法はありますか？ javascript、jquery、jsp、javaのいずれか

ありがとうございます！

編集： お返事ありがとうございました！私は、Javaでこれを何人のキャラクターに合わせるかを推測していました。それは最適ではない解決策のように思えたので、私はここに来たのです。

私の場合、CSSソリューションは完璧です。それは私のクライアントがすべてとにかく使用するので、それはFirefoxのために働くdoesntの取引のそれほど大きくない。 :)

Answer 1

あなたはtext-overflow:ellipsishttp://www.css3.com/css-text-overflow/

を使用してCSS3でそれを行うことができたり、jsの方法を使用して主張すれば、あなたはあなたのdiv内のテキスト・ノードをラップしてからとしてラップの幅を比較することができます親の

Answer 2

if(text.length > number_of_characters) { 
    text = text.substring(from, to); 
} 

Answer 3

text-overflow: ellipis

div { 
    text-overflow: ellipsis 
} 

はあなたのdivにidタグを追加する場合は、DIVの内容を取得するためにdocument.getElementById("divid").innerHTMLを使用することができますFirefoxの7 http://caniuse.com/#search=text-overflow

Answer 4

でサポートされます。そこから.lengthを使用して文字列の長さを取得できます。文字列の長さが特定のしきい値を超えている場合は、部分文字列を取り、 "..."を追加してください。

可能であれば、このサーバー側を実行するようにしてください。 Javascript/CSSを使用して、ユーザーのために正しくフォーマットすることは、理想的ではありません。

Answer 5

CSS text-overflowプロパティを試してください。

function TextAbstract(text, length) { 
    if (text == null) { 
     return ""; 
    } 
    if (text.length <= length) { 
     return text; 
    } 
    text = text.substring(0, length); 
    last = text.lastIndexOf(" "); 
    text = text.substring(0, last); 
    return text + "..."; 
} 

text = "I am not the shortest string of a short lenth with all these cows in here cows cows cows cows"; 

alert(TextAbstract(text,20)); 

EDIT：プロセステキスト内の余分な長さを持つすべてのdiv：あなたは関数を使用することができ、データを処理する場合

Answer 6

var maxlengthwanted=20; 

    $('div').each(function(){ 
     if ($('div').text().length > maxlengthwanted) 
      $(this).text(TextAbstract($(this).text())); 
    }); 

Answer 7

可能性が高い状況がありますことそれはそれ自身のフォントなどを持っているので、どのくらいの文字がDOM要素に収まるかを知ることはできません。 CSS3は現在（私にとってはとにかく）オプションではありません。だから、私はオフスクリーン少しのdivを作成し、幅が正しくなるまでそれにテスト文字列を妨害保つ：JavaScriptを使用して変数を短縮する

var text = 'Try to fit this text into 100 pixels!'; 
var max_width = 100; 

var test = document.createElement('div'); 
test.className = 'Same Class as your real element'; // give it the same font, etc as a normal button 
test.style.width = 'auto'; 
test.style.position = 'absolute'; 
test.style.left = '-2000px'; 
document.body.appendChild(test);    
test.innerHTML = text; 

if ($(test).width() > max_width) { 

    for (var i=text.length; i >= 0; i--) { 
     test.innerHTML = text.substring(0, i) + '...'; 
     if ($(test).width() <= max_width) { 
      text = text.substring(0, i) + '...'; 
      break; 
     } 
    } 
} 

document.body.removeChild(test); 

Answer 8

最も簡単な方法：

この答えに触発さ

function truncate(string, length){ 
    if (string.length > length) 
     return string.substring(0,length)+'...'; 
    else 
     return string; 
}; 

：I want to truncate a text or line with ellipsis using JavaScript