Мысли об обрезании многострочного текста кнопкой "показать больше" 😲

CSS
Мысли об обрезании многострочного текста кнопкой "показать больше" 😲

Я только недавно столкнулся с этой маленькой потребностью, я помню, как использовал ее давным-давно.JSСмирись с этим, в конце концов, я был молод и невежественен в то время.切换类的操作Можно использоватьCheckedРеализация псевдокласса, стоимость будет ниже, поэтому сначала перечислим функциональные моменты:

  1. Усечение многострочного текста с отображением многоточия
  2. "显示更多"кнопка, чтобы развернуть весь текст
  3. После расширения текста текст кнопки становится"收起文本"
  4. Кнопка появляется, когда текст被截断когда (если вы только текст一行, то и показывать не надо 😓)

Пункт вопроса:text-overflow: ellipsisНесколько строк не поддерживаются截断. кнопка переключения текста,CSSКак переключить текст?Как судить о состоянии кнопки?По порядку объясню ниже 🎈

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

Предполагая существующиеHTMLСтруктура выглядит следующим образом:

<div class="box">
  <p>文本内容</p>
</div>

Если требуется одна строка截断, общий подход таков:

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

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

Необходимо использовать многострочный текстline-clamp,определение被截断Строки текста:

p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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

нажатие кнопки показать весь текст

HTMLСтруктура трансформируется следующим образом:

<div class="box">
  <input type="checkbox" name="toggle" id="toggle" style="display: none;">
  <p>文本内容</p>
  <label for="toggle">显示更多</label>
</div>

Поведение нажатия кнопки монитора описано в начале текста.CheckedПсевдоклассы:

input[name="toggle"]:checked {
 & + p {
   -webkit-line-clamp: unset;
 }
}

Таким образом, когда пользователь щелкает (выбирает),展示Весь текст, не проверено收起текст:

Динамический текст кнопки

Справедливости ради, когда весь текст отображается, текст кнопки должен быть переключен на"收起文本",CSSКак изменить текст, на самом деле он использует псевдоэлементыcontentВот и все.

ПучокHTMLУдалите текст и замените его наCSSконтроль:

<label for="toggle"></label>

label {
  &::after {
    content: "显示更多";
  }
}

Так же можно получить:

input[name="toggle"]:checked {
  & ~ label {
    &::after {
      content: "收起文本";
    }
  }
}

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

Если стиль кнопки некрасивый, то настройте его сами 😓

Условия появления кнопки

когда текста меньше三行, кнопка не должна появиться, потому что это не нужно:

Есть большая проблема, полазив по интернету, обнаружил, что нет伪类Можно определить, является ли текст被截断, если есть, мы можем сделать это:

p {
 &:truncated {
   & + label {
    display: block;
   }
 }   
}

label {
  display: none;
}

truncatedсмысл截断из.

Но даже в этом случае он не может удовлетворить наши потребности, потому что, когда вы отображаете весь текст, ваш текст не имеет被截断, поэтому кнопка исчезает:

Вышеизложенное основано наJSосуществленный模拟效果, исходный код выглядит следующим образом:

let list = document.querySelectorAll("p");
let observer = new ResizeObserver(entries => {
  entries.forEach(item => {
    item.target.classList[item.target.scrollHeight > item.contentRect.height ? "add" : "remove"]("truncated");
  });
});

list.forEach(p => {
  observer.observe(p);
});

Принцип监听Размер текстового элемента меняется, затем динамически увеличиваетсяtruncatedназвание класса 😂

Так что вашиCSSсерединаtruncatedПсевдокласс следует изменить наtruncatedкласс 😓

p {
 &.truncated {
   & + label {
    display: block;
   }
 }   
}

мы надеемся切换, кнопка всегда есть, а не текст被截断, кнопка не отображается, поэтому нам не нужно сохранять监听При изменении размера текстового элемента нам нужно только начальное значение (есть ли значение при инициализации текста?被截断), то есть слушать только один раз!

entries.forEach(item => {
  //... 原来的代码
  
  observer.unobserve(item.target); // 移除监听
});

или не нужно использовать это вообщеAPI, когда страница инициализируется напрямую, просто пройдитесь и оцените один раз!

let list = document.querySelectorAll("p");

list.forEach(item => {
  item.classList[item.scrollHeight > item.offsetHeight ? "add" : "remove"]("truncated");
});

так,PЭлементы добавляются автоматически при инициализации страницыtruncatedимя класса, и кнопка всегда может отображаться:

расширять

Например, можно настроить стиль кнопки, добавить прозрачную градиентную маску внизу и эффект перехода при переключении 😁

Суммировать

checkedПсевдокласс - хорошая штука, может удовлетворить многие потребности без написанияJS, так что любой切换类的操作Вы можете рассмотреть возможность его использования (switch, сжатие строки меню и т. д.). Если вы считаете, что эта статья хороша, пожалуйста, не забудьте нажать赞и关注О~😊

Категории