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

Метод 1: свойство CSS «Переполнение текста»

<style>
  .ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px; /* set the desired width */
  }
</style>
<div class="ellipsis">
  This is a long text that will be truncated with three dots using CSS ellipsis.
</div>

Метод 2: обрезка текста JavaScript

<style>
  .ellipsis {
    max-width: 200px; /* set the desired width */
  }
</style>
<div class="ellipsis" id="ellipsisContainer">
  This is a long text that will be truncated with three dots using JavaScript.
</div>
<script>
  var container = document.getElementById("ellipsisContainer");
  var content = container.innerHTML;
  if (container.scrollWidth > container.offsetWidth) {
    while (container.scrollWidth > container.offsetWidth) {
      content = content.replace(/\W*\s(\S)*$/, '...');
      container.innerHTML = content;
    }
  }
</script>

Метод 3: CSS Flexbox и псевдоэлементы

‘…’;
поля слева: auto;
пробела: nowrap;

Метод 4. Функция ограничения CSS

<style>
  .ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* set the desired number of lines */
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px; /* set the desired width */
  }
</style>
<div class="ellipsis">
  This is a long text that will be truncated with three dots using CSS clamp function.
</div>

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