Как проверить количество строк, используя jQuery

Question

Пример: div с шириной 30 пикселей со словами «это текст». Скажем так, поскольку ширина узкая, она рендерится на странице следующим образом:

это
является
текст

(3 строки). Есть ли способ в jQuery, чтобы сказать, сколько строк требуется для отображения на странице? Например, что-то вроде $("#container").lineCount().

Бизнес-цель: если мой контент превышает определенное количество строк, я хочу манипулировать им, чтобы полоса прокрутки не появлялась, но у меня также была фиксированная высота, поэтому я не хочу связываться с переполнением .

Спасибо!

Answer 1

Это сложно, но можно сделать, даже если не указана высота строки или другой стиль.Он включает в себя кучу движущихся частей.

Сначала создайте «жертвенный» контейнер <div>.Заполните его известным количеством строк текста, по одному символу в каждой, и расположите его далеко за пределами экрана:

// calculate height per line
$calcdiv = $('<div/>').css({
  width: '50px',
  position: 'absolute', // don't affect layout
  left: '-2000px' // position far off=screen
}).html('A<br />B<br />C<br />D<br />E'); // add five lines

$('body').append( $calcdiv ); // make the browser render it

var lineHeight = $calcdiv.height()/5; // average height per line

Теперь мы знаем приблизительную высоту строки в пикселях, отображаемую этим браузером.,Мы обратим наше внимание на измеряемый блок:

$origDiv = $('div#div_to_measure');
$measureDiv = $origDiv.clone(); // clone it
$measureDiv.css({
  position: 'absolute',
  left: '-1000px', // position far off-screen
  height: 'auto' // let it grow to its natural full height
});
$('body').append( $measurediv ); // add it to the DOM, browser will render it

... и теперь мы знаем приблизительное количество строк в блоке, если им позволено достичь его естественных размеров, как показано браузером:

var numLines = $measureDiv.height() / lineHeight;

Нам нужно clone(), потому что высота исходного поля для измерения может быть ограничена текущими стилями и макетом страницы.

Теперь некоторая очистка:

$calcdiv.remove();
$measureDiv.remove();

Вот пример: http://jsfiddle.net/redler/FuWue/