不同瀏覽器中文本的大小（寬度）

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