さまざまなブラウザのテキストのサイズ（幅）

Question

正確な幅のdivボックスにテキストを挿入する必要があります。
すべての主要なブラウザでテキストを同じサイズに見せる方法（JavaScriptなど）はありますか？
たとえば、テキストが 'div'ボックスに収まらない場合は、いくつかの文字を削除します。

Answer 1

まず、フォントの面とサイズをCSSで設定します。そうすれば、ほとんどの場合同じ幅になります。

次に、オーバーフローを追加できます。あなたの部門にそれが終わりを過ぎて行くものを表示しないように。

どのようにこれをやっているかによって、幅を設定せずに余白と余白を使用することができます。つまり、divに常に収まります。これはあなたが望むものではないかもしれませんが。

Answer 2

ちょうどあなたのdivのCSSルールに次のプロパティを追加します。

overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 

することができますsee this in action here (JSFiddle)。

Answer 3

CSSまたはJavaScriptを使用してテキストを切り捨てることができます。ここにテキストが切り捨てられた場合、リンク「詳細を表示し」することができます私が書いたシンプルなjQueryの切り捨てプラグインの例です：

$.fn.trunc = function(_break_at) { 

    var _article = jQuery(this).text(); 
    var _leader = []; 
    var _trailer = []; 
    var _substr = _article.split(' '); 
    $(this).wrapInner('<div class="long"></div>'); 

    $.each(_substr, function(i, data) { 
     if (i < _break_at) { 
      _leader.push(data); 
     } 
    }); 

    if (_substr.length > _break_at) { 

     $('<div/>').addClass('short').html(_leader.join(' ')).prependTo(this); 
     $('<span/>').appendTo('.long').addClass('toggle').html(' &lt;&lt; Show less'); 
     $('<span/>').appendTo('.short').addClass('toggle').html('... Show more &gt;&gt;'); 

    } 
    $('.toggle').click(function() { 
     $('.short, .long').toggle('show'); 
    }); 
}; 

$(function() { 

    // This is how you use it 
    $('#article_body').trunc(2); 
}); 

http://jsfiddle.net/AlienWebguy/7ZamJ