В веб-разработке часто требуется контролировать внешний вид текста в ограниченном пространстве. Одной из особых проблем является ограничение количества строк, занимаемых текстовым блоком. В этой статье мы рассмотрим различные методы и приемы ограничения строк в HTML, а также приведем примеры кода для каждого подхода.

Метод 1: Техника CSS Line Clamp:
Свойство CSS line-clampпозволяет обрезать текст после определенного количества строк. Он широко поддерживается современными браузерами. Вот пример:

.clamped-text {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Number of lines to display */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Метод 2. Техника CSS-многоточия.
Свойство CSS text-overflowсо значением ellipsis— это еще один способ усечь текст и добавить многоточие в конце.. Вот пример:

.ellipsis-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Метод 3. Ограничение строк JavaScript.
В случаях, когда контент является динамическим или зависит от взаимодействия с пользователем, для ограничения строк можно использовать JavaScript. Вот пример использования JavaScript:

<div class="limited-lines" id="myText">
  Some long text goes here...
</div>
<script>
  var element = document.getElementById("myText");
  var lineHeight = parseInt(getComputedStyle(element).lineHeight);
  var maxHeight = lineHeight * 3; // Maximum height for 3 lines
  if (element.clientHeight > maxHeight) {
    while (element.clientHeight > maxHeight) {
      element.textContent = element.textContent.replace(/\W*\s(\S)*$/, "...");
    }
  }
</script>

Метод 4: ограничение строк на стороне сервера.
Если вы динамически генерируете HTML-контент на стороне сервера, вы можете ограничить количество строк в процессе генерации. Например, в PHP:

<?php
$limitedText = wordwrap($originalText, 30, "<br>", true);
$lines = explode("<br>", $limitedText);
$limitedContent = implode("<br>", array_slice($lines, 0, 3)); // Limiting to 3 lines
echo $limitedContent;
?>

Ограничение количества строк в HTML может значительно улучшить читаемость и эстетику вашего веб-контента. В этой статье мы рассмотрели несколько методов достижения ограничения строк, включая подходы на основе CSS, такие как line-clampи text-overflow, манипуляции с JavaScript и решения на стороне сервера. В зависимости от ваших конкретных требований и контекста вашего проекта вы можете выбрать наиболее подходящий метод для эффективного ограничения строк.