Построчный overflow

MiReQ · May 13, 2012

Всем добрый день.

Пытаюсь обрезать текст в блоке с фиксированной высотой и шириной. Соответственно, блоку задано свойство

overflow: hidden;

.

Получаем текст, последняя видимая строка которого видна на половину.

Вопрос: как ее скрыть?

Пример:

<!DOCTYPE html>
<html>
<head>
<style>
	div {
		width: 200px;
		height: 165px;
		overflow: hidden;
	}
	p {
		margin: 5px 0 0;
	}
</style>
</head>
<body>
	<div>
		<p>Здесь идет многострочный текст.</p>
		<p>Управлять свойствами line-height и margin'ами параграфов вообще не хочется.</p>
		<p>Да и вверху может идти картинка неопределенной высоты.</p>
	</div>
</body>
</html>

Искал и в yandex'е, и здесь, на форуме... Нашел мою проблему в теме обрезание текста на css3, но решения там так и не нашли. Предложили text-overflow, про который автор темы знал и в первом же сообщении объяснил, почему не подходит, и jQuery-плагин, который реализует text-overflow там, где его нет.

Заранее спасибо.

Viper · May 13, 2012

Позволительно ли, что бы высота блока динамически менялась(незначительно) на +-5-10px? И насколько дружны с JS?)

Думаю, без JS тут не обойтись...

Edited May 13, 2012 by Viper

MiReQ · May 13, 2012

Позволительно ли, что бы высота блока динамически менялась(незначительно) на +-5-10px?
И насколько дружны с JS?)
Думаю, без JS тут не обойтись...

На счет высоты блоков: хм... в общем-то не смертельно, наверное...

C JS знаком достаточно хорошо.

На сколько я понимаю, что вы предлагаете примерно следующее:

/*
 * это скорее псевдокод, так что...
 */

jQuery.fn.mlTextOverflow = function(){
	var block = this;
	this.children().each(function(index, elem){
		elem = jQuery(elem);
		var elemPosition = elem.position();
		if (elemPosition.top > block.height())	// блок целиком не виден
			//elem.css({display: 'none'});		// даже скрывать не надо
		else if (elemPosition.top + elem.height() > block.height()) // блок виден частично
		{
			var freeSpace = block.height() - elemPosition.top;
			var linesCount = Math.floor(freeSpace/elem.css('lineHeight'));	// количество строк текста для отображения
			target.height(elemPosition.top + linesCount * elem.css('lineHeight'));	// меняем высоту на допустимую (режем между строками)
		}
	});
}

По сути, можно... но... это же столько всего учитывать придется.... margin, padding, <p> <img /> </p>...

А какое решение Вы хотели предложить?

Viper · May 13, 2012

По сути, можно... но... это же столько всего учитывать придется.... margin, padding, <p> <img /> </p>...
А какое решение Вы хотели предложить?

Да, главную идею вы поняли. Если мы знаем, что елемент обрезаеться или не обрезаеться - дальше уже не проблема.

Да, если делать толковый плагин, то учитывать/продумывать прийдеться много факторов.

Имеет ли смысл нагружать сайт скриптом, ради этого - решать вам...

Другого выхода, удовлетворяющего всем факторам, я не вижу. Но это всего лишь первое предложение. Возможно, предложать еще что-то более простое и приемлемое...

Edited May 13, 2012 by Viper

Sign In

Построчный overflow

Question

MiReQ

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Viper

Link to comment

Share on other sites

MiReQ

Link to comment

Share on other sites

Viper

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information