Динамический межстрочный интервал

178

12 февраля 2018, 02:24

Добрый день! Есть элемент с заранее известной высотой, но не известным текстом внутри. Необходимо динамически рассчитывать межстрочный интервал для текста, чтобы заполнить весь элемент по высоте. Каким образом это делается ? Пример кода:

.table_otvod { 
  font-size: 14px; 
  line-height: 1.5; 
  border: none;  
  border-spacing: 20px; 
  text-align: center; 
  height:320px; 
  width:100%; 
} 
 
.table_otvod td{ 
	 background-color: #E8E8E8; 
  	width:33.33% 
} 
 
.table_otvod tr{ 
vertical-align: top; 
} 
 
.table_otvod ul{ 
  text-align: left; 
  list-style-image: url(MyURL); 
  list-style-position: inside; 
  padding-left: 0; 
} 
.table_otvod span{ 
padding-left: 20px; 
 
}

<table class="table_otvod"> 
  <tbody><tr> 
   
  <td><h3>Продукт </h3> 
    <ul> 
      <li><span>Текст 1</span></li> 
      <li><span>Очень длинный текст в несколько строк 11111</span></li> 
      <li><span>Текст 1</span></li> 
      <li><span>Текст 1</span></li> 
    </ul>   
    </td> 
    <td> 
     
    <h3>Сервис</h3> 
    <ul> 
      <li><span>Очень длинный текст в несколько строк 11111</span></li> 
      <li><span>Очень длинный текст в несколько строк 11111</span></li> 
 
    </ul>   
     
    </td> 
    <td> 
     
        <h3>Условия</h3> 
    <ul> 
      <li><span>Чуть короче текст213213213213</span></li> 
      <li><span>Чуть короче текст</span></li> 
      <li><span>Чуть короче текст</span></li> 
      <li><span>Чуть короче текст</span></li> 
    </ul>   
     
    </td> 
  </tr> 
</tbody></table>

Answer 1

1 шаг. Посчитать количество строк в тексте.
Делается этот так:
Выводим текст в обычный div без фиксированной высоты и берём его высоту (H).
Высота конкретной строчки нам известна (lineHeight). На основе этих данных расчитываем количество строк = высота блока / высоту строчки.

stringNumber = H / lineHeight.

2 шаг. Рассчитываем новую высоту строчки для заполнения блока.
Высоту блока которую нужно получить (BH) делим на количество строчек (stringNumber)

newLineHeight = BH / stringNumber;

Реализация алгоритма

В данном примере необходимую высоту задаю через кастомный атрибут myHeight. Алгоритм сам находит все блоки с классом fill и на основе заданого атрибута рассчитывает их параметры.

var els = document.getElementsByClassName("fill"); 
 
for (var el of els) { 
  MakeFill(el); 
} 
 
function GetStringsNumber(el) { 
  var height = el.clientHeight; 
  var style = window.getComputedStyle(el); 
  var lineHeightStr = style.getPropertyValue('line-height'); 
  var lineHeight = +lineHeightStr.substring(0,lineHeightStr.length-2); 
  var linesNumber = height / lineHeight; 
  return linesNumber; 
} 
 
function MakeFill(el) { 
  var height = +el.getAttribute("myHeight"); 
  var stringNumber = GetStringsNumber(el); 
  var lineHeight = height / stringNumber; 
  el.style.lineHeight = lineHeight + "px"; 
}

.fill { 
  width: 500px; 
  font-size: 16px; 
  line-height: 16px; 
  border: 1px solid green; 
  margin-bottom:15px; 
}

<div class="fill" myHeight="120"> 
  Привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет 
</div> 
 
<div class="fill" myHeight="150"> 
  Привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет 
</div> 
 
<div class="fill" myHeight="70"> 
  Привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет 
</div>

Кроме того для реального кода необходимо будет ещё учесть padding.

Answer 2

Задача легко решается с помощью display: flex, тк он заполняет все свое "главное направление"(flex-direction), и если оно будут вертикальным (flex-direction: row), то блок будет распространятся на всю высоту, например:

.items { 
display: flex; 
justify-content: space-around; 
border: 1px solid #ccc; 
height:320px; 
} 
.item { 
flex-grow: 1; 
align-items: center; 
display: flex; 
flex-direction: column; 
justify-content: space-between; 
border: 1px solid #222; 
} 
.item p { 
border: 1px solid #921; 
}

<div class="items"> 
<div class="item"> 
	<h2>Header</h2> 
	<p>12312<br>3123</p> 
	<p>123</p> 
	<p>123</p> 
</div> 
<div class="item"> 
	<h2>Header</h2> 
	<p>123</p> 
	<p>12222<br>3333</p> 
	<p>123</p> 
</div> 
<div class="item"> 
	<h2>Header</h2> 
	<p>123</p> 
	<p>123</p> 
	<p>12222<br>33333</p> 
</div> 
</div>