Форум PHP программистов > Обрезать строку

[ Поиск ] - [ Пользователи ] - [ Календарь ]

T1grOK

18.04.2012 - 22:49

Есть скажем тег
<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% точности.

<!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 написал(а):

как вариант

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

Быстрый ответ:

Здесь расположена полная версия этой страницы.