Как определить что текст не помещается в input?

Question

[Mracs]

Есть обычный себе input. К input применены стили overflow : hidden и text-overflow: ellipsis. Необходимо по наведению мыши на сей input выводить весь текст в подсказку, но это необходимо делать только если текст не помещается полностью. Подскажите пожалуйста, как собственно определить помещается ли текст в этот злополучный input?

Answer 1

[Растишка]

Никак.
Можно только на js определять длину текста, и в зависимости от этого навешивать класс разрешающий показывать подсказку.

function getWidthOfText(txt){
  var c=document.createElement('canvas');
  var ctx=c.getContext('2d');
  ctx.font = '16px arial';
  var length = ctx.measureText(txt).width;
  return txt + ' ' + Math.round(length);
}

Answer 2

[Mracs]

К сожалению, это не универсально. В зависимости от размера окна изменяется и длина вмещающегося текста.

Comments

[Алексей Бурлака]

Растишка скорее всего не увидел ваш комментарий, нужно писать по ссылке Комментировать под ответом автора.
По вашему замечанию: вешаете событие на ресайз окна и производите перерасчет.

[Растишка]

Алексей Бурлака: Все же увидел, но отвечать лучше через комментарий, Mracs.