Как узнают ширину текста в 2015 году?

Question

[vasIvas]

Нужно сделать бегущую строку, но для этого нужно узнать ширину текста.
Сам я не догадался и полез в гугл, но там статьи либо не понятного происхождения,
либо датируются временем чуть ли не симилетней давности. Но мы на пороге 2016
и по этому я надеюсь услышать ответ, что давно уже не нужно выворачиваться наизнанку
чтобы узнать обычную ширину. Как её узнать на чистом js?

Answer 1

[Владимир]

Ну вообще есть специальное свойство
https://developer.mozilla.org/ru/docs/Web/API/Elem...
То есть если текст в одну строку, и какая-то часть скрыта скажем overflow, то это свойство вернет именно ширину всего контента.

Answer 2

[Super User]

function getWidthOfText(txt, fontname, fontsize) {
  var c=document.createElement('canvas');
  var ctx=c.getContext('2d');
  ctx.font = fontsize + 'px' + fontname;
  var length = ctx.measureText(txt).width;
  return length;
}

Или:

function getWidthOfText(txt, fontname, fontsize){
  var e=document.createElement('span');
  jQuery(e).text(txt);
  jQuery(e).css({
    'font-size': fontsize,
    'font-family': fontname
  });
  jQuery(e).width();
  delete e;
  return width;
}

Или:

function getWidthOfText(txt, fontname, fontsize){
  var e = document.createElement('span');
  e.style.fontSize = fontsize;
  e.style.fontFamily = fontname;
  e.innerHTML = txt;
  return e.innerWidth;
}

Comments

[vasIvas]

А откуда у Вас в последнем примере innerWidth у спана?

[vasIvas]

второй вариант с jQ.