Question

我需要在精确宽度的div框中插入文本是否有办法（例如使用javascript）使文本在所有主流浏览器中看起来都相同？例如，如果文本不适合'div'框，则删除一些字母。

Answer 1

只需将以下属性添加到div的CSS规则中：

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

你可以see this in action here (JSFiddle)。

Answer 2

首先，用css设置你的字体和大小。然后你几乎总是有相同的宽度。

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

根据你的做法，你可以使用填充和边距而不设置宽度，这样它总是适合div。虽然这可能不是你想要的。

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

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

3 个答案: