Количество строк в блоке

locky · July 2, 2009

Подскажите, пожалуйста.

Имеется:

Родительский блок и дочерний. Дочерний блок "приклеен" к left bottom родительского.

Задача следующая:

В дочерний блок выводится текст. Если текст занимает 1 строку, то блок растягивается по ширине текста, вот так:

Если в тексте >= 2 строк, то дочерний блок растягивается на всю ширину родительского. То есть так:

Проблема:

Как это реализовать, когда изначально размер пользовательских шрифтов и кол-во текста неизвестны?

upd: В FireFox все по дефолту выглядит, как и должно. А вот в Opera и IE – вот так:

Edited July 2, 2009 by locky

Tokolist · July 2, 2009

через max-width: 100%, если я все правильно понял

locky · July 2, 2009

Хм... max-width – это не то, что нужно. Он ведь просто ограничивает ширину элемента, если она превышает значение в max-width. А мне нужно не это.

Tokolist · July 2, 2009

<!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">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
  <title></title>
  <style type="text/css">
	#parent {
	  position: relative;
	  width: 90%;
	  height: 200px;
	  background: #0f0;
	}

	#child {
	  position: absolute;
	  left: 0;
	  bottom: 0;
	  max-width: 100%;   <——-
	  background: #f00;
	}
  </style>
</head>
<body>
<div id="parent">
  <div id="child">Text text text text text text text text text
	text text text text text text text text
	text text text text text text text text.</div>
</div>
</body>
</html>

Оно? Надо только еще для ИЕ<7 написать экспрешн.

Edited July 2, 2009 by Tokolist

Zippovich · July 2, 2009

Самое сложное здесь вычислить кол-во строк

locky · July 2, 2009

Tokolist

Нет, это работает не при все длинах строк.

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

<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<title>test</title>
  <style type="text/css">
	#parent {
	  position: relative;
	  width: 90%;
	  height: 200px;
	  background: #0f0;
	}

	#child {
	  position: absolute;
	  left: 0;
	  bottom: 0;
	  max-width: 100%;   
	  background: #f00;
	}
  </style>
</head>
<body>
 <div id="parent">
  <div id="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis leo sed augue venenatis egestas eu pharetra ipsum. Maecenas suscipit, ipsum non pretium consequat, elit massa ultricies ligula, adipiscing sollicitudin lectus quam hendrerit arcu. Nam a lacus eleifend arcu tristique rutrum ac vitae urna.</div>
</div>
</body>
</html>

Второй день уже над этим бьюсь! Голова совсем ничего не выдает...

Tokolist · July 2, 2009

Самое сложное здесь вычислить кол-во строк

Ну не так уж и сложно, но ресурсоемко.

locky · July 2, 2009

Я так понимаю, используя JavaScript, это вполне достижимо. Только вот в JS я не разбираюсь совсем...

Tokolist · July 2, 2009

Нет, это работает не при все длинах строк.
Например, если вставить такой текст, то дочерний блок так и не растянется на всю ширину родительского:

Как это не растянется? Ваш браузер?

А еще лучше скриншот того что есть и того, что надо.

Edited July 2, 2009 by Tokolist

locky · July 2, 2009

Мой-то браузер – FireFox. И в нем как раз все нормально). А вот в Opera и IE(6) – нет.

Tokolist · July 2, 2009

Ну не так уж и сложно, но ресурсоемко.

Хотя не, даже и не ресурсоемко.

Мой-то браузер – FireFox. И в нем как раз все нормально). А вот в Opera и IE(6) – нет.

Я же написал, что для ИЕ<7 надо экспрешн. В Опере сейчас посмотрю...

locky · July 2, 2009

Извиняюсь, просто голова уже совсем плохо соображает) Добавил скриншотов того, что у меня есть.

Хм... может с display поиграться?..

Edited July 2, 2009 by locky

Tokolist · July 3, 2009

Похоже, что без JS все-таки не обойтись.

Проверял в IE6, FF3, Safari 4, Opera 9.64, Chrome 2.

<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<title>test</title>
  <style type="text/css">
	#parent {
	  position: relative;
	  height: 200px;
	  background: #0f0;
	}

	#child {
	  position: absolute;
	  left: 0;
	  bottom: 0;
	  float: left;
	  background: #f00;
	}
  </style>

  <script type="text/javascript">
  (function() {
	var childTextWidth = 0;
	var child;
	var parent;

	function addEvent(obj, evType, fn){ 
	  if (obj.addEventListener) {
		obj.addEventListener(evType, fn, false);
	  } else if (obj.attachEvent) {
		obj.attachEvent('on' + evType, fn);
	  }
	}

	addEvent(window, 'load', windowLoad);

	function getChildTextWidth() {
	  var measurer = child.cloneNode(true);

	  measurer.style.whiteSpace = 'nowrap';
	  measurer.style.position = 'absolute';
	  measurer.style.left = '-1000px';
	  measurer.style.top = '-1000px';
	  measurer.style.bottom = 'auto';
	  measurer.style.right = 'auto';
	  measurer.display = 'block';
	  document.body.appendChild(measurer);

	  var result = measurer.offsetWidth;
	  document.body.removeChild(measurer);
	  return result;
	}


	function windowLoad() {
	  parent = document.getElementById('parent');
	  child = document.getElementById('child');
	  childTextWidth = getChildTextWidth();
	  addEvent(window, 'resize', windowResize);
	}

	function windowResize() {
	  child.style.width = (childTextWidth >= parent.clientWidth) ? '100%' : 'auto';
	}
  })()
  </script>
</head>
<body>
<div id="parent">
  <div id="child">Легато имеет нечетный open-air, не случайно эта композиция вошла в диск В.Кикабидзе "Ларису Ивановну хочу".</div>
</div>
</body>
</html>

При динамическом изменении содержимого дочернего блока, необходимо заново вычислить его ширину (getChildTextWidth);

locky · July 3, 2009

Спасибо за помощь!

Сейчас буду тестить)

В IE7 работает, в 6 пока протестить не могу. Опрера 9.60 все еще не растягивает...

Но принцип понятен)) Спасибо еще раз! Теперь я разберусь)

Sign In

Количество строк в блоке

Question

Link to comment

Share on other sites

13 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information