Усеките строку приятно для установки в данной пиксельной ширине

Существует несколько проблем с Вашим кодом.

• Почему / 5 ? Ширина символов зависит от font-family и font-size.
• Необходимо выйти str в заголовке сокр. (или иначе "сделает код недопустимым).
• diff не объявляется и заканчивается в глобальной области видимости
• substring как предполагается, не работает как этот. Какой браузер Вы используете?
• hidden не допустимое значение style.display. Для сокрытия его, необходимо использовать значение none но затем браузер не вычисляет offsetWidth. Использовать style.visibility="hidden" вместо этого.
• Поиск правильной длины очень неэффективен.
• Должен выйти </abbr>"

Я переписал его для Вас и добавил className таким образом, можно использовать стиль для установки font-family и font-size. Г-н Fooz предложил, чтобы Вы использовали наведение мыши для показа целой строки. Это не необходимо, так как современные браузеры делают это для Вас (протестированный с FF, IE, Opera и Chrome)

    function fitStringToSize(str,len,className) {
    var result = str; // set the result to the whole string as default
    var span = document.createElement("span");
    span.className=className; //Allow a classname to be set to get the right font-size.
    span.style.visibility = 'hidden';
    span.style.padding = '0px';
    document.body.appendChild(span);


    // check if the string don't fit 
    span.innerHTML = result;
    if (span.offsetWidth > len) {
        var posStart = 0, posMid, posEnd = str.length;
        while (true) {
            // Calculate the middle position
            posMid = posStart + Math.ceil((posEnd - posStart) / 2);
            // Break the loop if this is the last round
            if (posMid==posEnd || posMid==posStart) break;

            span.innerHTML = str.substring(0,posMid) + '…';

            // Test if the width at the middle position is
            // too wide (set new end) or too narrow (set new start).
            if ( span.offsetWidth > len ) posEnd = posMid; else posStart=posMid;
        }
        //Escape
        var title = str.replace("\"",""");
        //Escape < and >
        var body = str.substring(0,posStart).replace("<","&lt;").replace(">","&gt;");
        result = '<abbr title="' + title + '">' + body + '&hellip;<\/abbr>';
    }
    document.body.removeChild(span);
    return result;
    }

Править: При тестировании немного больше я нашел несколько ошибок.

• Я использовал Math.ceil вместо намеченного Math.floor (Я возлагаю ответственность, это на том английском языке не мой родной язык),

• Если бы входная строка имела теги HTML затем, то результат был бы не определен (не хорошо усечь тег в середине или оставить открытые теги),

Улучшения:

• Выйдите из строки, которая копируется в промежуток на всех местах. Можно все еще использовать объекты HTML, но никакие теги не позволяются (< и > будет отображен),
• Переписал while- оператор (это немного быстрее, но главная причина состояла в том, чтобы избавиться от ошибки, которая вызвала дополнительные раунды и избавиться от оператора завершения),
• Переименованный в функцию к fitStringToWidth

Версия 2:

function fitStringToWidth(str,width,className) {
  // str    A string where html-entities are allowed but no tags.
  // width  The maximum allowed width in pixels
  // className  A CSS class name with the desired font-name and font-size. (optional)
  // ----
  // _escTag is a helper to escape 'less than' and 'greater than'
  function _escTag(s){ return s.replace("<","&lt;").replace(">","&gt;");}

  //Create a span element that will be used to get the width
  var span = document.createElement("span");
  //Allow a classname to be set to get the right font-size.
  if (className) span.className=className;
  span.style.display='inline';
  span.style.visibility = 'hidden';
  span.style.padding = '0px';
  document.body.appendChild(span);

  var result = _escTag(str); // default to the whole string
  span.innerHTML = result;
  // Check if the string will fit in the allowed width. NOTE: if the width
  // can't be determined (offsetWidth==0) the whole string will be returned.
  if (span.offsetWidth > width) {
    var posStart = 0, posMid, posEnd = str.length, posLength;
    // Calculate (posEnd - posStart) integer division by 2 and
    // assign it to posLength. Repeat until posLength is zero.
    while (posLength = (posEnd - posStart) >> 1) {
      posMid = posStart + posLength;
      //Get the string from the beginning up to posMid;
      span.innerHTML = _escTag(str.substring(0,posMid)) + '&hellip;';

      // Check if the current width is too wide (set new end)
      // or too narrow (set new start)
      if ( span.offsetWidth > width ) posEnd = posMid; else posStart=posMid;
    }

    result = '<abbr title="' +
      str.replace("\"","&quot;") + '">' +
      _escTag(str.substring(0,posStart)) +
      '&hellip;<\/abbr>';
  }
  document.body.removeChild(span);
  return result;
}