Размер (ширина) текста в разных браузерах

Question

Мне нужно поместить текст в поле div с точной шириной.
Есть ли способ (например, с помощью javascript), чтобы текст выглядел одинаково во всех основных браузерах?
Например, убрать несколько буквтекст не помещается в поле «div».

Answer 1

Просто добавьте следующие свойства в правило CSS для вашего div:

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

Вы можете увидеть это в действии здесь (JSFiddle) .

Answer 2

Вы можете обрезать свой текст с помощью 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

Answer 3

Прежде всего, установите лицо и размер шрифта с помощью css.Тогда у вас почти всегда будет одинаковая ширина.

Затем вы можете добавить переполнение: скрытый;в ваш div, чтобы он не показывал ничего, что выходит за пределы конца.

В зависимости от того, как вы это делаете, вы можете использовать отступы и поля, не задавая ширину, таким образом, он всегда будет помещаться вдела.Хотя это может быть не то, что вы хотите.