Tailwind 是流行的原子化 css 框架。 有多流行呢？ 它现在有 68k star 了，要知道 express 才 60k： 那什么是原子化 css？ 我们平时写 css 是这样的： 在 ht

前言 上一篇文章采用了纯CSS方案实现展开收起，本篇采用JS方案实现该功能 优点：在不需要折叠时，直接使展开按钮消失，而不是一直存在，这样就不会存在占位的问题，解决了CSS方案的痛点 缺点：消耗部分性

这是一篇前端小菜鸡关于省略号...的一些实现，话不多说，先来看看css的实现。 思路：获取显示文本内容的父级容器，如果超出限制高度，就删掉一位字符再比较，如果高度大于限制高度的三倍，我们就删掉后一半的字符再比较，直到等于限制高度。话不多说，上代码。 首先，为了方便测试，先生成长…

这是我参与8月更文挑战的第7天，活动详情查看： 8月更文挑战 文本溢出隐藏，超出多少行，显示‘展示’按钮，点击更多显示全部 首先考虑一下要实现的结果： 文本超出两行时显示省略号 '显示更多'按钮可以显

getClientRects 可以获取到多行文本的宽高位置等属性，可以通过getClientRects来判断当前文本的内容总行数和每行宽度。只要不断截取文本，判断总行数，直到行数符合预期后，展示截取后的文案。 3.辅助方法：获取当前文本长度（getLines）、判断当前文本是否…

点击 展开 显示所有文本内容，内容的尾部会有一个 收起。如此可反复操作。 换行添加"展开"按钮即可。可是呢，这个玩意好用是好用，看到-webkit-的前缀，我们就能敏感的知道存在浏览器兼容性问题。严格说来，这种换行显示 “展开”按钮的形式与我们想要的还是有点区别。 如何达成我们…

在平时开发中，经常会碰到一些需要判断高度的场景，比如当超过一定高度后，需要自动出现展开折叠按钮，如下 传统的思路肯定是通过JS去动态计算容器的高度，但这样就涉及到加载时机的问题，获取早了可能元素还没渲

前段时间接到一个需求，关于文字展开和收起的，走了很多路,踩了很多坑，在这个夜深人静，想你想到泪流的时候，决定记录分享一下。

多行文本展开收起是一个很常见的交互， 如下图演示 实现这一类布局和交互难点主要有以下几点 位于多行文本右下角的“展开收起”按钮 “展开”和“收起”两种状态的切换 当文本不超过指定行数时，不显示“展开收