首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

如何实现文本内容折叠显示“...查看全部”?

来源 | https://wintc.top/article/58 多行文本超过指定行数隐藏超出部分并显示“...查看全部”是一个常遇到的需求,网上也有人实现过类似的功能,不过还是想自己写写看,于是就写了一个...n行(比如3行),不超过n行正常显示;超过n行则在最后一行尾部显示“展开”或“查看全部”之类的按钮,点击按钮则展开显示全部内容,或者跳转到其它页面展示所有内容。...二、实现原理 纯css很难完美实现这个功能,所以还得借助js来实现,实现思路大体相似,都是判断内容是否超过指定行数,超过则截取字符串的前x个字符,然后然后和“...查看全部”拼接在一起,这里的x即截取长度...最直观的想法就是直接遍历,让x从0开始增长到显示文本总长度,对于每个x值,都计算一次文字是否超过N行,没超过则加继续遍历,超过则获得了合适的长度x - 1,跳出循环。...这个计算过程应该在一个任务(即常说的”宏任务“)中完成,否则计算过程中会出现显示闪动的”异常“情况,所以可以说计算过程是阻塞的,因此计算的总时间一定要控制到非常低,即要减少计算的次数。

4.6K20

技巧:文本超过N行折叠内容并显示“...查看全部”

作者:MUMA https://wintc.top/article/58 多行文本超过指定行数隐藏超出部分并显示“...查看全部”是一个常遇到的需求,网上也有人实现过类似的功能,不过还是想自己写写看...n行(比如3行),不超过n行正常显示;超过n行则在最后一行尾部显示“展开”或“查看全部”之类的按钮,点击按钮则展开显示全部内容,或者跳转到其它页面展示所有内容。...多行文本超过指定行数折叠 二、实现原理 纯CSS很难完美实现这个功能,所以还得借助JS来实现,实现思路大体相似,都是判断内容是否超过指定行数,超过则截取字符串的前x个字符,然后然后和“...查看全部”拼接在一起...最直观的想法就是直接遍历,让x从0开始增长到显示文本总长度,对于每个x值,都计算一次文字是否超过N行,没超过则加继续遍历,超过则获得了合适的长度x - 1,跳出循环。...这个计算过程应该在一个任务(即常说的”宏任务“)中完成,否则计算过程中会出现显示闪动的”异常“情况,所以可以说计算过程是阻塞的,因此计算的总时间一定要控制到非常低,即要减少计算的次数。

2.5K10

技巧:文本超过N行折叠内容并显示“...查看全部”

作者:MUMA https://wintc.top/article/58 多行文本超过指定行数隐藏超出部分并显示“...查看全部”是一个常遇到的需求,网上也有人实现过类似的功能,不过还是想自己写写看,...n行(比如3行),不超过n行正常显示;超过n行则在最后一行尾部显示“展开”或“查看全部”之类的按钮,点击按钮则展开显示全部内容,或者跳转到其它页面展示所有内容。...多行文本超过指定行数折叠 二、实现原理 纯CSS很难完美实现这个功能,所以还得借助JS来实现,实现思路大体相似,都是判断内容是否超过指定行数,超过则截取字符串的前x个字符,然后然后和“...查看全部”拼接在一起...最直观的想法就是直接遍历,让x从0开始增长到显示文本总长度,对于每个x值,都计算一次文字是否超过N行,没超过则加继续遍历,超过则获得了合适的长度x - 1,跳出循环。...这个计算过程应该在一个任务(即常说的”宏任务“)中完成,否则计算过程中会出现显示闪动的”异常“情况,所以可以说计算过程是阻塞的,因此计算的总时间一定要控制到非常低,即要减少计算的次数。

2.1K20

vim 代码折叠之设置默认代码不折叠

配置 foldmethod 可以定义折叠方式,有6种可选方式: 1. manual //手工定义折叠 2. indent //用缩进表示折叠 3. expr //用表达式来定义折叠 4. syntax...//用语法高亮来定义折叠 5. diff //对没有更改的文本进行折叠 6. marker //用标志折叠 我选用 syntax 来定义折叠,这种方式比较简单,但是当配置完这个值后,你打开代码,就会发现...vim 默认把所有代码都折叠了,这显然不是我想要的,google一番后找到办法,设置 foldlevelstart 为99后,打开默认没有折叠。...配置: "使用语法高亮定义代码折叠 set foldmethod=syntax "打开文件时默认不折叠代码 set foldlevelstart=99 参考文献# vim的代码折叠:设置默认代码不折叠

23830

Facebook运用全息折叠光学技术,演示 “迄今为止最薄VR显示器”

VR显示器和镜头叠加的厚度直接降为9mm 文 | CC (VRPinea 7月14日讯)Facebook的AR / VR研发部门Facebook Reality Labs 于近日发布一项新研究,研究提出了一种结合全息光学元件和基于偏振的光学折叠的全新近眼显示器...但随着VR科技的进一步发展,很多公司都开始努力使产品变得更轻薄便携,其中也包括Facebook提出的最新方案:同时使用折叠光学和全息光学。...折叠光学 由上文可知,为了使光线聚焦到用户眼中,VR头显的镜头必须与显示器保持一定距离。折叠光学的概念则是将“该距离”折叠到其自身,使光线可以在更窄的空间内穿越同样的距离。...这种方法(也称为“饼干光学”)可以有效缩短镜头和显示器的之间的距离,从而使头显更加轻薄。 全息光学 相较于传统的折叠光学中的镜头,研究人员将透镜制成了全息图。...二者结合 此次Facebook提出的“折叠式全息光学”正是将两种技术合二为一,以此真正实现日常眼镜大小的VR头显。

1.2K20
领券