Как определить ширину текста javascript / jquery

Самое обычное решение - создать инлайновый элемент (у блочных ширина обычно или 100%, или заданная), например, span, задать его текст, шрифт и измерить его ширину функцией width().

Например, это можно сделать так:

function textWidth(text,fsize){
    var newelem = $('<span>');
    newelem.text(text);
    newelem.css('font-size', fsize);
    newelem.hide();
    $('body').append(newelem);
    var w = newelem.width();
    newelem.remove();
    return w;
};

Использовать следующим образом:

var mytextwidth = textWidth('lalala','16px');

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

$.fn.textWidth = function(){
    var newelem = $('<span>');
    newelem.text($(this).text());
    newelem.css({
        'font-size': $(this).css('font-size'),
        'font-weight':$(this).css('font-weight'),
        'font-family':$(this).css('font-family'),
        'font-style':$(this).css('font-style')
    });
    newelem.hide();
    $('body').append(newelem);
    var w = newelem.width();
    newelem.remove();
    return w;
};

И мы можем использовать эту функцию для любого jquery-объекта:

var mytextwidth = $('#myelement').textWidth();