The size (width) of text in different browsers

Question

I need to fit text in div box with exact width.
Is there a way (for example with javascript) to make the text look the same size in all major browsers?
For example strip some letters if text does not fit 'div' box.

This is not suitable for me. Overflow hidden can cut letters in the middle. — pi11, Oct 21 '11 at 03:46
@pi11: What do you mean in "strip some letters if text does not fit 'div' box"? — Yaakov Shoham, Oct 21 '11 at 03:55

score 1 · Answer 1 · answered Oct 21 '11 at 03:48

1

Just add the following properties to the CSS rule for your div:

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

You can see this in action here (JSFiddle).

answered Oct 21 '11 at 03:48

Milan Gardian

11,326
5
38
45

Nice. Unfortunately my FF4 does not support text-overflow:ellipsis; – pi11 Oct 21 '11 at 03:58
@pi11 - yes, this is a well known FF problem (see http://stackoverflow.com/questions/4927257/text-overflowellipsis-in-firefox-4-and-ff5). Supposedly FF7 finally supports ellipsis... – Milan Gardian Oct 21 '11 at 04:24

score 0 · Answer 2 · answered Oct 21 '11 at 03:45

0

First of, set your font face and size with css. Then you will almost always have the same width.

Then you can add overflow: hidden; to your div so it won't show anything that goes past the end.

Depending on how you're doing this, you could use padding and margins without setting a width, that way it will always fit in the div. Although this may not be what you want.

answered Oct 21 '11 at 03:45

xthexder

1,555
10
22

I set font face and size. But text look difference in FF and Chrome (width). Here is example - http://imghs.com/i/NeZvKsiBVRbf/ – pi11 Oct 21 '11 at 03:47
May I ask what your page layout is? There is likely a better way to support different text widths. Maybe set the width to more than is need and center the text? – xthexder Oct 21 '11 at 03:51
In my case texts are from user-input. So size of them are always different. I can truncate letters with python before output, but I need to fill whole div box with text. And I can't estimate exact font width. – pi11 Oct 21 '11 at 04:06

score 0 · Answer 3 · answered Oct 21 '11 at 03:51

You can truncate your text with CSS or with JavaScript. Here's an example of a simple JQuery truncation plugin I wrote which allows for a "show more" link if the text is truncated:

$.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

Thanks, but how estimate _break_at value for each line of text? For example this text - "lllllll" and this text - "WWWWWW" take different width (if used not monospace font). — pi11, Oct 21 '11 at 04:03

The size (width) of text in different browsers

3 Answers3