主页 / 问题 / 1583857
Accepted
Майя
Asked:2024-06-14 02:19:43 +0000 UTC2024-06-14 02:19:43 +0000 UTC

如何制作“更多”按钮来裁剪文本js

  • 772

通过单击按钮，将显示隐藏的文本。需要通过js来实现。使用js裁剪文本。这样“更多”按钮就会变为“隐藏”

有一个代码示例，但现在不能正常工作

let textHolder = document.querySelector('.demo');
let fullText = textHolder.innerHTML;
let btn = document.querySelectorAll('.btns');
let textStatus = 'full';

function Truancate(textHolder, limit) {
  let txt = textHolder.innerHTML;
  if (txt.length > limit) {
    let newText = txt.substr(0, limit) + ' ...';
    textHolder.innerHTML = newText;
    textStatus = 'truncated';
  }
}

Truancate(textHolder, textHolder.offsetWidth / 3.39);

function toggleText() {
  if (textStatus === 'truncated') {
    textHolder.innerHTML = fullText;
    textStatus = 'full';
  } else {
    Truancate(textHolder, textHolder.offsetWidth / 3.32);
  }
}

btn.forEach((btns) => {
  btns.addEventListener('click', toggleText);
});
 <div class="box">
   <span class="demo" id="demo">Я в восторге от качества работы Веры. О такой тщательной уборке можно было только мечтать. Я не ожидала такого результата. Отдельно хочу Я в восторге от качества работы Веры. О такой тщательной уборке можно было только мечтать. Я не ожидала такого результата. Отдельно хочу..Я в восторге от качества работы Веры. О такой тщательной уборке можно было только мечтать. Я не ожидала такого результата. Отдельно хочу</span>
    <span class="btns">Еще</span>
</div>
<br>

 <div class="box">
   <span class="demo" id="demo">Я в восторге от качества работы Веры. О такой тщательной уборке можно было только мечтать. Я не ожидала такого результата. Отдельно хочу Я в восторге от качества работы Веры. О такой тщательной уборке можно было только мечтать. Я не ожидала такого результата. Отдельно хочу..Я в восторге от качества работы Веры. О такой тщательной уборке можно было только мечтать. Я не ожидала такого результата. Отдельно хочу</span>
    <span class="btns">Еще</span>
</div>

javascript

2 个回答

  1. 一切都可以通过几行JS轻松解决

    document.querySelectorAll('.box').forEach(box => {
  let textHolder = box.querySelector('.demo');
  let fullText = textHolder.innerHTML;
  let btn = box.querySelector('.btns');

  function toggleText() {
    box.classList.toggle('active');
  }

  btn.addEventListener('click', toggleText);
});
    .demo {

  height: calc(20px * 2);
  /* не стал писать 40px, чтобы показать, что максимум по высоте на 2 строки выделяю блок */

  overflow: hidden;
  line-height: 20px;
  /* каждая строка будет по высоте 15px, чтобы я точно мог установить высоту блока (это чисто визуально, ни на что не влияет) */
  text-align: justify;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}


.box.active .btns>span {
  display: none;
}

.box.active .btns:after {
  content: "Скрыть текст";
}

.box.active .demo {
  height: initial;
  display: block;
  overflow: initial;
}
     <div class="box">
   <span class="demo">Я в восторге от качества работы Веры. О такой тщательной уборке можно было только мечтать. Я не ожидала такого результата. Отдельно хочу Я в восторге от качества работы Веры. О такой тщательной уборке можно было только мечтать. Я не ожидала такого результата. Отдельно хочу..Я в восторге от качества работы Веры. О такой тщательной уборке можно было только мечтать. Я не ожидала такого результата. Отдельно хочу</span>
   <button class="btns"><span>Еще</span></button>
 </div>
 <br>

 <div class="box">
   <span class="demo">Я в восторге от качества работы Веры. О такой тщательной уборке можно было только мечтать. Я не ожидала такого результата. Отдельно хочу Я в восторге от качества работы Веры. О такой тщательной уборке можно было только мечтать. Я не ожидала такого результата. Отдельно хочу..Я в восторге от качества работы Веры. О такой тщательной уборке можно было только мечтать. Я не ожидала такого результата. Отдельно хочу</span>
   <button class="btns"><span>Еще</span></button>
 </div>

    • 2
  2. Best Answer

    如果您考虑要裁剪的尺寸而不是样式，则必须首先记住文本，以便在打开完整尺寸时恢复它。

    主要功能toggleText是保存文本一次，然后在类存在/不存在时更改它active。要么是背下来的原文，要么是通过函数剪切的truncate

    const truncate = (text, limit) => {
  return text.substr(0, limit) + '...';
}

const toggleText = (e, item) => {
  const text = item.querySelector('.demo');
  let newText = '';
    
  if (!item.dataset.text) {
    item.dataset.text = text.innerHTML;
  }
  
  newText = (item.classList.contains('active'))
    ? item.dataset.text
    : truncate(item.dataset.text, item.offsetWidth / 3.32);
  
  text.innerHTML = newText;
  item.classList.toggle('active'); 
}

document.querySelectorAll('.box').forEach(item => {
  const btn = item.querySelector('.btns');
  toggleText(null, item);
  
  btn.addEventListener('click', e => toggleText(e, item));
});
    .btns {
  display: inline-block;
  color: green;
  margin: 0 10px;
 }

.btns::after {
  content: 'Скрыть'
}

.active .btns::after {
  content: 'Показать'
}
    <div class="box">
   <span class="demo" id="demo1">Я в восторге от качества работы Веры. О такой тщательной уборке можно было только мечтать. Я не ожидала такого результата. Отдельно хочу Я в восторге от качества работы Веры. О такой тщательной уборке можно было только мечтать. Я не ожидала такого результата. Отдельно хочу..Я в восторге от качества работы Веры. О такой тщательной уборке можно было только мечтать. Я не ожидала такого результата. Отдельно хочу</span>
    <span class="btns"></span>
</div>
<br>

 <div class="box">
   <span class="demo" id="demo2">Еще текст какой-то. Я в восторге от качества работы Веры. О такой тщательной уборке можно было только мечтать. Я не ожидала такого результата. Отдельно хочу Я в восторге от качества работы Веры. О такой тщательной уборке можно было только мечтать. </span>
    <span class="btns"></span>
</div>

    • 0

相关问题