<h1>
Текст
текст
текст
</h1>
То есть в одну строку текст не помещается. Можно ли с помощью JS определить, во сколько строк вывелся текст? Символы в тексте могу иметь разную ширину поэтому жесткая привязка к количеству символов не подходит.
Спустя 1 минута, 22 секунды (18.04.2012 - 20:51) glock18 написал(а):
str.split('\n').length
Спустя 32 минуты, 6 секунд (18.04.2012 - 21:23) T1grOK написал(а):
Нет это не подойдет. Знака переноса в строке нет. Ширина, выравнивание в css.
Спустя 3 минуты, 22 секунды (18.04.2012 - 21:26) glock18 написал(а):
Цитата (T1grOK @ 18.04.2012 - 18:49) |
Можно ли с помощью JS определить, во сколько строк вывелся текст? |
Цитата (T1grOK @ 18.04.2012 - 19:23) |
Знака переноса в строке нет. |
а, вон чего, то есть сколько строк занял значит. ну ябвзял line-length и offsetHeight, да посчитал бы
Спустя 28 минут, 43 секунды (18.04.2012 - 21:55) redreem написал(а):
Цитата |
ну ябвзял line-length |
забавно. что то новое в css.
Спустя 30 минут, 29 секунд (18.04.2012 - 22:25) redreem написал(а):
к размышлению:
накидал ради интереса обертывание каждого символа в спан и подсчет строк исходя из того, что 1 строка = количеству целых умещающихся в контенер этих самых спанов, так вот сходу видна проблема - браузер принимает решение о переносе строки исходя из различных возможных свойств, которые тоже надо "эмулировать" и "отслеживать" для 100% точности.
накидал ради интереса обертывание каждого символа в спан и подсчет строк исходя из того, что 1 строка = количеству целых умещающихся в контенер этих самых спанов, так вот сходу видна проблема - браузер принимает решение о переносе строки исходя из различных возможных свойств, которые тоже надо "эмулировать" и "отслеживать" для 100% точности.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
h1 {font-size:20px}
.wrapSpan {display:inline}
#wrap {width:100px;background:#faa;}
</style>
</head>
<body>
<div id="wrap">
<h1>в чащах юга жил бы цитрус? да, но фальшивый экземпляр!</h1>
<input type="button" onclick="hmLines()" value="Сколько строк?" />
</div>
<script type="text/javascript">
function hmLines() {
doc = document;
var hEl = doc.getElementById('wrap').getElementsByTagName('h1')[0];
var hStr = hEl.innerHTML;
var wrapSpan = '';
for (var i = 0; i < hStr.length; i++) wrapSpan = wrapSpan + '<span class="wrapSpan">' + hStr.substring(i, i+1) + '</span>';
hEl.innerHTML = wrapSpan;
var spanEls = hEl.getElementsByTagName('span');
var lines = 0;
var wrapW = hEl.parentNode.offsetWidth;
var chW = 0;
for (var i = 0; i < spanEls.length; i++) {
chW = chW + spanEls[i].offsetWidth;
if (chW >= wrapW) {chW=0; lines++;}
}
alert(lines + ' строк');
}
</script>
</body>
</html>
Спустя 12 часов, 50 минут, 3 секунды (19.04.2012 - 11:15) killer8080 написал(а):
T1grOK
замерить высоту строк для данного блока, и делить высоту блока на высоту строки.
Спустя 35 минут, 21 секунда killer8080 написал(а):
как вариант
замерить высоту строк для данного блока, и делить высоту блока на высоту строки.
Спустя 35 минут, 21 секунда killer8080 написал(а):
как вариант
function get_num_lines(o){
var container = document.createElement('div');
with(container.style){
visibility = 'hidden';
position = 'absolute';
top = left = '0px';
width = height = '1px';
overflow = 'hidden';
zIndex = -100;
}
document.body.appendChild(container);
var clone = o.cloneNode(false);
container.appendChild(clone);
clone.innerHTML = 'Test';
var lineHeight = clone.offsetHeight;
container.parentNode.removeChild(container);
return parseInt(o.offsetHeight / lineHeight);
}
_____________
Mysql, Postgresql, Redis, Memcached, Unit Testing, CI, Kohana, Yii, Phalcon, Zend Framework, Joomla, Open Cart, Ymaps, VK Api