Как я могу получить высоту строки от размера шрифта в браузере?

Question

Range.getClientRects() метод возвращает список ClientRect занят range и это хорошо работает, когда диапазон находится в пределах нормального диапазона с текстом.

<div class="line">
  <span class="run">Hello!</span><span class="run"></span>
</div>

Но не получается ClientRect когда промежуток пуст. (как во втором пролете)

Я попробовал следующее, однако результаты не были удовлетворительными.

• Установите для свойства отображения диапазона значение inline-block
• Вставить '\ufeff' в промежуток В этом случае я могу получить ClientRect но это испортит другие части кода.

Если я могу вычислить высоту строки из font-sizeбыло бы лучше. Есть ли способ получить высоту строки пустого диапазона в px?

ПРИМЕЧАНИЕ: я не пытаюсь получить line-height собственность css. В этом случае line-height было бы normal,

Answer 1

1. Просто поместите любой персонаж в это <span>, В этом случае я положил U+FEFF персонаж.

   var elem = $('span')[0];
   elem.textContent = '\ufeff';
   

2. Получи прямоугольник.

   var rect = elem.getClientRect();
   ...
   

3. Восстановить <span> быть пустым.

   elem.textContent = '';
   

Answer 2

Вы можете пройти через дерево DOM над диапазоном, чтобы найти ближайший элемент с числовым определением высоты строки. В моем тестовом случае это, кажется, работает и на процентной высоте строки - он вычисляет высоту строки, а не процент. Я не уверен насчет кросс-браузерной поддержки.

Демо: http://jsfiddle.net/colllin/DHLWW/

Код:

var lineHeight = -1;
var $span = $('span');
var tree = $span.get().concat( $span.parents().get() );
$(tree).each(function(index, element) {
    if (lineHeight < 0) {
        lineHeight = parseFloat($(element).css('line-height')) || -1;
    }
});
$(document.body).append('<br>line-height of span: '+lineHeight);