【笔记】css实现文本超出固定行数显示...和展开收起

CSS可以通过-webkit-line-clamp属性配合display: -webkit-box和-webkit-box-orient: vertical来实现文本超出固定行数时显示省略符号，并且可以配合JavaScript实现展开和收起的功能。

以下是实现这一功能的CSS和简单的JavaScript代码：

CSS:

.text-limit {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 设置为想要的行数 */
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: calc(3 * line-height(行高)); /* 根据行高调整最大高度 */
  transition: max-height 0.3s ease-in-out;
}
 
.text-expanded {
  max-height: none; /* 展开时去掉限制 */
}

JavaScript:

function toggleText(element) {
  element.classList.toggle('text-expanded');
}

HTML:

<div class="text-limit">
  这里是一段很长的文本，如果超出了固定的行数，将会显示为省略符号。点击这里可以展开或收起全文。
</div>
<button onclick="toggleText(document.querySelector('.text-limit'))">
  展开／收起
</button>

这段代码实现了文本超出固定行数后显示省略符号，并且可以通过按钮点击来切换文本的展开和收起状态。