显示更多/更少的 PHP 价值

Question

代码：

<p><?= $row['courseInfo']; ?></p> 

如何制作一个字符数有限的显示更多/更少按钮。但是当触摸显示更多时会显示所有文本，当显示更少时会回到有限的字符数。

Answer 1

这是一个 JS 方法。我将努力控制字符数，但现在......

window.onload = function() {
  let rm = document.querySelectorAll('.readmore');
  rm.forEach(el => {
    el.classList.add('less');
    var div = document.createElement('div');
    div.innerHTML = "<a href='javascript:void(0);' class='rmlink' onclick='toggleRM(this)'>Read more</a>";
    el.append(div);

  })
}

function toggleRM(el) {
  const cl = el.parentNode.parentNode.classList
  const is_less = cl.contains('less');
  el.innerHTML = !is_less ? "Read More" : "Read Less";
  if (is_less) cl.remove('less');
  else cl.add('less');
}

.readmore {
  max-width: 250px;
  border: 1px solid #333;
  padding: 10px;
}

.readmore.less {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

<div class='readmore'>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
  animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
  est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
  voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</div>