不同浏览器中文本的大小（宽度）

Question

我需要将文本放在具有精确宽度的div框中。
有没有一种方法（例如JavaScript）使文本在所有主流浏览器中看起来相同？
例如，如果文本不适合'div'框，请剥去一些字母。

Answer 1

首先，设置你的字体和大小与CSS。那么你几乎总是有相同的宽度。

然后你可以添加overflow：hidden;到你的div，所以它不会显示任何结束的东西。

取决于你如何做这个，你可以使用填充和利润不设置宽度，这样它会永远适合在div。虽然这可能不是你想要的。

Answer 2

只需添加以下属性到CSS规则的DIV：

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