CSS реализует усечение текста «неопределенное количество строк»

внешний интерфейс CSS
CSS реализует усечение текста «неопределенное количество строк»

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

  1. Вся высота контейнера фиксирована, всего 3 строки для заголовка и содержимого.
  2. Заголовок до 2-х строк, далее опускается
  3. Содержание определяется оставшимся пространством.Если заголовок занимает 2 строки, содержание превышает 1 строку и опускается, если заголовок занимает 1 строку, содержание превышает 2 строки и опускается.

Это очень духовное (отстраненное) живое (спектральное) взаимодействие? Вы можете полностью использовать пространство страницы, чтобы обеспечить отображение заголовка и содержимого, как показано ниже.

image-20211022112416841

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

1. Название нельзя упустить

Предположим, есть такой кусок HTML

<div class="section">
    <h3 class="title">LGD 在 TI10 放猛犸，RNG 在 S7 放加里奥最后都输了，哪个更让你愤怒失望？</h3>
    <p class="excerpt">猛犸是对面的绝中绝，大家都知道，并且之前扳回两局已经证明了，当lgd选择ban掉猛犸，或者自己抢掉猛犸时，对面完全不是对手。</p>
</div>

Правило заголовка — опустить более 2 строк, это просто, используйте его напрямую-webkit-line-clampвыполнить

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

Более 2 строк будут автоматически пропущены

Kapture 2021-10-22 at 14.09.26

Во-вторых, количество адаптивных строк контента.

Поскольку вся высота фиксирована, можно ли сделать так, чтобы контентная часть адаптировалась к оставшемуся пространству? упомянуладаптивное остаточное пространство, сразу приходит на ум flex layout, поэтому реализовать его можно так:

.section{
    display: flex;
    overflow: hidden;
    height: 72px;/*定一个高度*/
    flex-direction: column;
}
.excerpt{
  	flex: 1; /*自适应剩余空间*/
  	overflow: hidden;
}

поэтому с помощьюflex: 1;overflow: hidden;Почти добился желаемого эффекта, а именно

Kapture 2021-10-22 at 14.22.05

Это уже идеально, но теперь нет эллипса за пределы этого, а затем смотреть вниз

3. Неопределенная черта выходит за пропуск

в общем,-webkit-line-clampПодходит для случая, когда количество рядов определено, сейчас количество рядов не фиксировано, иногда 1 ряд, иногда 2 ряда, как с этим быть? Вот тут и нужна хитрость. Вы можете помнить эту статьюCSS реализует многострочный текст «развернуть и свернуть» — Nuggets (juejin.cn), в котором упоминается, как использовать float для достижения эффекта пропуска текста. Если вам интересно, вы можете обратиться к нему.

1. Эффект объемного звучания в правом нижнем углу

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

.excerpt::before{
    content: '...';
    float: right;
}

image-20211022143914085

Очевидно, многоточие в настоящее время находится вв правом верхнем углуДа, теперь его нужно перенести вНижний правыйДа ладно, предыдущая операция состоит в том, чтобы сжать многоточие вниз через плавающий элемент, но требуется дополнительный элемент-заполнитель.

Вот новый способ использованияКомпоновка фигур CSSвыполнить!

Сначала заполните высоту многоточия и выровняйте его по низу, вы можете использоватьflexвыполнить

.excerpt::before{
    content: '...';
    float: right;
  	height: 100%;
    display: flex;
    align-items: flex-end;
}

image-20211022144434028

Таким образом, хотя многоточие доходит до нижнего правого угла, верхняя часть также сдавливается, и эффект заворачивания не достигается. В настоящее время вы можете использовать макет фигур.Если вы не понимаете этот макет, вы можете обратиться к этой статье Чжан Синьсюй:Учебник по компоновке форм CSS, написанный для меня « Zhang Xinxu-Xin Space-Xin Life (zhangxinxu.com)

Здесь просто используйтеshape-outside:inset()Вот и все, это означает расстояние, на которое верхнее, правое, нижнее и левое направления отступают внутрь с самим собой в качестве границы. Например, он должен иметь отступ близко к положению многоточия, поэтому

.excerpt::before{
    /*其他样式**/
  	shape-outside: inset(calc(100% - 1.5em) 0 0);
}

Эффект следующий

Kapture 2021-10-22 at 14.56.46

Удалите фон, и вы увидите, что многоточие идеально завернуто в правый нижний угол.

Kapture 2021-10-22 at 15.23.18

2. Автоматически скрывать многоточие

Теперь возникла проблема, как скрыть многоточие, когда текста меньше? Вы можете попробовать «CSS с завязанными глазами»

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

.excerpt::after{
    content: '';
    position: absolute;
    width: 999vh;
    height: 999vh;
    background: #fff;
}

Принцип следующий

Kapture 2021-10-22 at 15.41.15

Отдельные крайние случаи не могут быть охвачены, например,

image-20211025112119129

Это не имеет значения, вы можете просто найти что-то, чтобы компенсировать это, например,box-shadow, просто сместите немного в левый нижний угол.

.excerpt::after{
    content: '';
    position: absolute;
    width: 999vh;
    height: 999vh;
    background: #fff;
    box-shadow: -2em 2em #fff; /*左下的阴影*/
}

image-20211025112648385

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

Kapture 2021-10-22 at 15.46.18

Таким образом реализуется интерактивный эффект начала статьи, и можно получить доступ ко всему коду.auto-clamp (codepen.io)

image-20211022183643368

4. Резюме и объяснение

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

  1. Многострочная упущение непосредственно -Webkit-Line-Clamp, поддержка современных браузеров
  2. гибкий макет может легко справиться с оставшимся пространством
  3. Макет float + shape также может обеспечить эффект обтекания в правом нижнем углу.
  4. box-shadow часто используется при завязывании глаз
  5. Уместное накопление некоторых CSS трюков и приемов, иногда это очень поможет

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

Категории