CSS выполняет функцию «расширения и свертывания», опираясь на идеи больших парней.

CSS

начать картину

more.gif

Как показано на рисунке выше, расширение и свертывание многострочного текста — очень распространенный эффект взаимодействия.

Основные трудности реализации такого типа компоновки и взаимодействия следующие:

  • Кнопка «Развернуть и свернуть» в правом нижнем углу многострочного текста
  • Переключение между состояниями «развернуть» и «свернуть»
  • Когда текст не превышает заданного количества строк, кнопка "Развернуть свернуть" не отображается

До этого, глядя только на этот макет, было не так просто сделать красивые интерактивные эффекты даже с помощью JavaScript. Узнав от разных сторон, выяснилось, что чистый CSS тоже можно прекрасно реализовать.

Первый шаг, кнопка "Развернуть свернуть"

Обрезка многострочного текста

Предположим, есть следующая структура html

<div class='more-text'>
     如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。
</div>

Многострочный текст не является способом отображения многоточия. Обычно вы часто используете его. Код клавиши выглядит следующим образом.

.more-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
 }

image.png

Эффект обтекания нижнего правого угла кнопки
<div class='more-text'>
    <div class='more-btn'>展开</div>
     如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。
</div>

.more-btn{
    float: left;
    /*其他装饰样式*/
}

image.png

перейти на правый поплавок

.more-btn{
    float: right;
     /*其他装饰样式*/
}

image.png

двигаться в правый нижний угол

.more-btn{
    float: right;
    margin-top: 50px;
     /*其他装饰样式*/
}

image.png

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

В настоящее время это делается путем рисования псевдоэлементов с несколькими плавающими элементами.

.more-text::before {
    content: '';
    float: right;
    width: 10px;
    height: 50px;
    background: red;
}
.more-btn{
    float: right;
    clear: both;
     /*其他装饰样式*/
}

image.png

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

.more-text::before {
    content: '';
    float: right;
    width: 0;
    height: 50px;
    background: red;
}

image.png

Как видите, упаковка кнопок работает идеально, как и ожидалось.

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

.more-text::before {
    content: '';
    float: right;
    width: 0;
    height: calc(100% - 20px); 
    /*100%减去一个按钮的高度即可*/
    background: red;
}

image.png

К сожалению, calc не добился желаемого эффекта.

Зачем? Откройте консоль, чтобы найти,calc计算所得高度为0. Как это произошло? Причина в том, что父级元素没有设置高度, 100% в расчете недействительны. Но проблема в том, что требуемая высота здесь динамическая, и установить фиксированную высоту для родителя нельзя.

На этом этапе нам нужно изменить макет. использоватьflex布局. Наверное, путьflex 布局 У ребенка высота изменений может быть рассчитана в процентах.

Измените следующим образом, снова оберните .more-text и снова установите его.display: flex

<div class='more-wrapper'>
    <div class='more-text'>
        <div class='more-btn'>展开</div>
        如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。
    </div>
</div>

.more-wrapper{
    display: flex;
}

После этой модификации расчетная высота calc может вступить в силу. Как показано ниже.

image.png

На этом эффект обтекания в правом нижнем углу кнопки практически завершен. В сочетании с событием нажатия кнопки, и все готово.

Обработка совместимости браузера

Приведенная выше реализация является наиболее совершенным способом справиться с этим. Однако в браузере Firefox есть проблема совместимости.

image.png

Ух ты. Так стыдно. К сожалению, у браузера Safari также были проблемы с совместимостью.

После многочисленных расследований было установлено, чтоdisplay: -webkit-box;Возникла проблема совместимости со свойством.

Проблема в том, что если нетdisplay: -webkit-box;Как добиться многострочного усечения? Если вы устанавливаете максимальную высоту, когда знаете количество строк, теоретически вы можете добиться многострочного усечения. Отсюда мы передаем атрибут высоты строкиline-heightдля начала. Если вам нужно установить его на 3 строки, установите высоту на высоту строки * 3.

.more-text {
    /*
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    */
    overflow: hidden;
    line-height: 1.5;
    max-height: 4.5em;
 }

image.png

его все еще нет省略号.... Это можно сделать с помощью псевдоэлементов.

.more-btn::before{
    content: '…';
    color: #333;
    font-size: 14px;
    position: absolute;
    left: -10px;
    transform: translateX(-100%);
}

image.png

Готово, затем нажмите, чтобы переключиться.

Нажмите, чтобы переключиться между «Развернуть» и «Свернуть».

Наша цель — сделать это на чистом CSS. Затем необходимо переключение состояния CSS, и это можно сделать с помощью функции input type = "checkbox".

Чтобы использовать функцию ввода, вы должны внести некоторые изменения в html-код.

<div class="more-wrapper">
    <input type="checkbox" id="exp" />
    <div class="more-text">
      <!-- <div class="more-btn">展开</div> -->
      <label class="more-btn" for="exp">展开</label>
      如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。如何才能做好展开收起交互呢。
    </div>
</div>

#exp:checked + .more-text {
    -webkit-line-clamp: 999;
    max-height: none;
}

more.gif

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

<label class="more-btn" for="exp"></label>
 <!-- 去掉按钮文字 -->

.more-btn::after {
    content: '更多';
}

в: проверенном состоянии

#exp:checked + .more-text .more-btn::after {
    content: '收起';
}

Многоточие скрыть обработки.

#exp:checked + .more-text .more-btn::before {
    visibility: hidden;
}

more.gif

На этом нужный нам эффект достигнут.

Конечно, мы можем добавить некоторые过渡动画Сделайте эффект разворачивания и складывания более красивым. Здесь это не будет продемонстрировано.

Наконец, оценивается количество строк текста.

Предыдущие шаги были в состоянии удовлетворить потребности использования. Но есть еще проблемы. например, когда文本内容较少时, усечение в это время не происходит, поэтому нет необходимости省略号...так же как展开收起кнопка.

image.png

Конечно, вы можете выбратьjsспособ судить. Но наша цель — чистый CSS.

У CSS нет логического суждения, мы можем найти только другой путь,视觉欺骗. или позвонил障眼法.

Например, в приведенной выше сцене, если не происходит усечения, то нет необходимости省略号...а также展开кнопка. В это время, если вы добавите элемент в конце текста. А чтобы не влиять на верстку, установите для этого элемента абсолютное позиционирование.

.more-text::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: red;
}

При этом ставим родительскийoverflow: hidden;Сначала удалить. Эффект следующий

image.png

Как показано на рисунке, элементы в красной части полностью заблокированы.按钮часть.

Затем мы меняем красный цвет на тот же цвет фона, что и у родителя, и восстанавливаем родительский цвет.overflow: hidden;.

more.gif

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

#exp:checked + .more-text::after {
    visibility: hidden;
}

more.gif

Как видите, это очень полезно.

Примечание. IE10 и более ранние версии не рассматриваются~

Реализовать идеи изFront-end команда чтения, автор Ян Вэньбинь

Категории