Чистый CSS реализует многострочное усечение текста

внешний интерфейс CSS
Чистый CSS реализует многострочное усечение текста

исходный адрес

предисловие

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

Вроде бы очень простой эффект усечения заголовка, но единого стандарта реализации свойств CSS нет, и для его достижения нужны замечательные приемы.Вообще говоря, при создании такого эффекта усечения текста мы больше надеемся:

  1. Хорошая совместимость, хорошая поддержка основных популярных браузеров
  2. Отзывчивое усечение, настраиваемое в соответствии с разной шириной
  3. Многоточие отображается только тогда, когда текст выходит за пределы допустимого диапазона, в противном случае многоточие не отображается
  4. Положение многоточия показывает правильно

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

Однострочное усечение текста text-overflow

Переполнение текста, которое мы часто используем, должно быть text-overflow: многоточие. Я думаю, что все знакомы с ним. Чтобы обрезать одну строку текста, требуется всего несколько строк кода.

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

Осознайте эффект:демонстрационный адрес


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

Применимые сценарии: однострочное усечение текста проще всего реализовать и дает наилучший эффект. Используйте его с уверенностью.

Если это эффект перехвата многострочного текста, то добиться его не так просто.

реализация webkit-line-clamp

Сначала вводится первый метод, который реализуется через атрибут -webkit-line-clamp. Конкретный метод заключается в следующем:

div {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

Его нужно комбинировать с display, -webkit-box-orient и overflow:

  • display: -webkit-box; Свойство, которое необходимо комбинировать для отображения объекта в виде гибкой блочной модели.
  • -webkit-box-orient; свойство, которое необходимо комбинировать, чтобы установить или получить расположение дочерних элементов объекта flexbox.
  • text-overflow: многоточие; необязательный атрибут, который можно использовать для скрытия текста вне допустимого диапазона с помощью многоточия "..." в случае многострочного текста.

Осознайте эффект:демонстрационный адрес

С точки зрения эффекта, его преимуществами являются:

  1. Отзывчивое усечение, настраиваемое в соответствии с разной шириной
  2. Многоточие отображается только тогда, когда текст выходит за пределы допустимого диапазона, в противном случае многоточие не отображается
  3. Браузер реализован нативно, поэтому положение многоточия отображается в самый раз

Но обратная сторона также очевидна, потому что -webkit-line-clamp — это неканоническое свойство, которого нет в проекте спецификации CSS. Другими словами, только браузеры с ядром webkit поддерживают это свойство, браузеры Firefox и IE не поддерживают это свойство, а совместимость с браузерами оставляет желать лучшего.

Сценарий использования: В основном используется для мобильных страниц, потому что браузеры мобильных устройств больше основаны на ядре webkit.Помимо плохой совместимости, эффект усечения хорош.

Позиционирование элементов для достижения усечения многострочного текста

Другой надежный и простой способ — установить высоту контейнера относительно позиционирования и смоделировать реализацию с помощью элемента, содержащего многоточие (…) Метод реализации следующий:

p {
    position: relative;
    line-height: 18px;
    height: 36px;
    overflow: hidden;
}
p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    
    /* 为了展示效果更好 */
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}

Принцип реализации хорошо понятен: абсолютно позиционировать псевдоэлемент в конец строки и закрывать текст, а затем использовать overflow: hidden, чтобы скрыть лишний текст.

Осознайте эффект:демонстрационный адрес

С точки зрения эффекта реализации он имеет преимущества:

  1. Хорошая совместимость, хорошая поддержка основных популярных браузеров
  2. Отзывчивое усечение, настраиваемое в соответствии с разной шириной

Однако он не может распознавать длину текста, то есть многоточие будет отображаться только тогда, когда текст выходит за пределы диапазона, иначе многоточие отображаться не будет. А поскольку мы искусственно добавляем эффект многоточия в конце текста, это приведет к тому, что он не будет тесно вписываться в текст.В этом случае вы можете добавить word-break:break-all;Разделить на новые строки.

Подходящая сцена: имеется много текстового содержимого, и определено, что текстовое содержимое определенно будет превышать контейнер, поэтому выбор этого метода является хорошим выбором.

Функция float реализует усечение многострочного текста.

Возвращаясь к началу, то, что я хочу сделать, это перехватить многострочный текст заголовка.Очевидно, что невозможно контролировать длину заголовка.Очевидно, что вышеописанный метод не может быть использован. Вернемся к сути вопроса: мы хотим, чтобы в CSS было свойство, которое показывает многоточие, когда текст переполняется, и не показывает многоточие, когда его нет. (две формы, два эффекта)

Как раз тогда, когда я думал, что CSS бессилен и может быть реализован только через JS, я увидел очень оригинальный метод, который мог бы удовлетворить всем вышеперечисленным критериям.Теперь я расскажу, как добиться эффекта обрезания многострочного текста с помощью float характерная черта.

Основные:

Есть три блока div, розовый блок перемещается влево, светло-голубой блок и желтый блок перемещаются вправо.

  1. Когда высота голубого прямоугольника ниже высоты розового прямоугольника, желтый прямоугольник все равно будет ниже и правее голубого прямоугольника.
  2. Если в голубом поле слишком много текста, а высота превышает розовое поле, желтое поле не останется внизу справа, а окажется под розовым полем.

Что ж, две формы отображения двух состояний были выделены, тогда мы можем расположить желтую рамку относительно и переместить переполненную желтую рамку в нижний правый угол текстового содержимого, а не переполненная будет перемещена в правый нижний угол. Внешнее пространство исчезло, пока мы используем overflow: hidden, чтобы скрыть его.

Основной принцип заключается в следующем: мы можем представить светло-голубую область как заголовок, а желтую область как эффект многоточия. Тогда вы можете почувствовать, что розовая рамка занимает место. Разве это не означает, что заголовок будет задержан в целом? Здесь вы можете использовать отрицательное значение поля, чтобы выйти. Установите отрицательное значение поля слева от светло-голубое поле должно быть таким же, как ширина розового поля. , заголовок также отображается нормально.

Затем мы упрощаем предыдущую структуру DOM до следующего:

<div class="wrap">
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos labore sit vel itaque delectus atque quos magnam assumenda quod architecto perspiciatis animi.</div>
</div>

И розовое, и желтое поле теперь можно заменить псевдоэлементами.

.wrap {
  height: 40px;
  line-height: 20px;
  overflow: hidden;
}
.wrap .text {
  float: right;
  margin-left: -5px;
  width: 100%;
  word-break: break-all;
}
.wrap::before {
  float: left;
  width: 5px;
  content: '';
  height: 40px;
}
.wrap::after {
  float: right;
  content: "...";
  height: 20px;
  line-height: 20px;
  /* 为三个省略号的宽度 */
  width: 3em;
  /* 使盒子不占位置 */
  margin-left: -3em;
  /* 移动省略号位置 */
  position: relative;
  left: 100%;
  top: -20px;
  padding-right: 5px;
}

Осознайте эффект:демонстрационный адрес

Вот самый аккуратный способ, который я видел до сих пор. Он должен только поддерживать функции CSS 2.1.Его преимущества:

  1. Хорошая совместимость, хорошая поддержка основных популярных браузеров
  2. Отзывчивое усечение, настраиваемое в соответствии с разной шириной
  3. Многоточие отображается только тогда, когда текст выходит за пределы допустимого диапазона, в противном случае многоточие не отображается

С другой стороны, поскольку мы имитируем эллипсы, поэтому иногда не можем правильно отобразить местоположение, поэтому вы можете рассмотреть:

  1. Добавьте эффект градиента, чтобы он соответствовал тексту, как в демонстрационном эффекте выше.
  2. Добавлен разрыв слова: разбить все; чтобы можно было разделить слово на разрыв строки, чтобы текст и многоточие лучше подходили.

Этот метод должен быть лучшим способом, который я видел, чтобы справиться с этим с помощью чистого CSS.Если у вас есть лучший метод, оставьте сообщение для связи!

Категории