首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

来源 | https://wintc.top/article/58 多行文本超过指定行数隐藏超出部分并显示“...查看全部”是一个常遇到的需求,网上也有人实现过类似的功能,不过还是想自己写写看,于是就写了一个...https://wintc.top/laboratory/#/ellipsis 一、需求描述 长度不定的一段文字,最多显示n行(比如3行),不超过n行正常显示;超过n行则在最后一行尾部显示“展开”或“查看全部...二、实现原理 纯css很难完美实现这个功能,所以还得借助js来实现,实现思路大体相似,都是判断内容是否超过指定行数,超过则截取字符串的前x个字符,然后然后和“...查看全部”拼接在一起,这里的x即截取长度...这个长度满足从x的位置截断字符串,前半部分+“...查看全部”等文字刚好不会超出指定行数N,但是多截取一个字,则会超出N行。...不过或许可以借助浏览器的Range API 来实现截断位置的定位,Range的insertNode以及setStart接口可以将“...查看全部”插入到指定位置,而如果插入位置刚好符合需要,则可以通过Range.cloneContents

4.6K20
您找到你想要的搜索结果了吗?
是的
没有找到

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

作者:MUMA https://wintc.top/article/58 多行文本超过指定行数隐藏超出部分并显示“...查看全部”是一个常遇到的需求,网上也有人实现过类似的功能,不过还是想自己写写看...https://wintc.top/laboratory/#/ellipsis 一、需求描述 长度不定的一段文字,最多显示n行(比如3行),不超过n行正常显示;超过n行则在最后一行尾部显示“展开”或“查看全部...多行文本超过指定行数折叠 二、实现原理 纯CSS很难完美实现这个功能,所以还得借助JS来实现,实现思路大体相似,都是判断内容是否超过指定行数,超过则截取字符串的前x个字符,然后然后和“...查看全部”拼接在一起...这个长度满足从x的位置截断字符串,前半部分+“...查看全部”等文字刚好不会超出指定行数N,但是多截取一个字,则会超出N行。...不过或许可以借助浏览器的Range API [4]来实现截断位置的定位,Range的insertNode以及setStart接口可以将“...查看全部”插入到指定位置,而如果插入位置刚好符合需要,则可以通过

2.5K10

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

作者:MUMA https://wintc.top/article/58 多行文本超过指定行数隐藏超出部分并显示“...查看全部”是一个常遇到的需求,网上也有人实现过类似的功能,不过还是想自己写写看,...https://wintc.top/laboratory/#/ellipsis 一、需求描述 长度不定的一段文字,最多显示n行(比如3行),不超过n行正常显示;超过n行则在最后一行尾部显示“展开”或“查看全部...多行文本超过指定行数折叠 二、实现原理 纯CSS很难完美实现这个功能,所以还得借助JS来实现,实现思路大体相似,都是判断内容是否超过指定行数,超过则截取字符串的前x个字符,然后然后和“...查看全部”拼接在一起...这个长度满足从x的位置截断字符串,前半部分+“...查看全部”等文字刚好不会超出指定行数N,但是多截取一个字,则会超出N行。...不过或许可以借助浏览器的Range API [4]来实现截断位置的定位,Range的insertNode以及setStart接口可以将“...查看全部”插入到指定位置,而如果插入位置刚好符合需要,则可以通过

2.1K20

linux查看全部环境变量_linux刷新环境变量命令

阅读目录 常用命令 linux查看环境变量 linux变量的种类 设置变量的三种方法 使用unset删除指定的环境变量 删除PATH环境变量指定值 常用的环境变量 其他 ---- 常用命令 1、可用 export...命令查看PATH值 export 2、单独查看PATH环境变量,可用: echo $PATH 3、添加PATH环境变量(临时),可用: export PATH=/opt/STM/STLinux-2.3...linux查看环境变量 1.使用echo命令查看单个环境变量。例如: echo $PATH 2.使用env查看所有环境变量。例如: env 3.使用set查看所有本地定义的环境变量。...source /etc/profile之后,打印PATH的值会出现重复 https://blog.csdn.net/qq_20064763/article/details/89464133 解决方法:重新登录查看即可

7.8K30

前后端全部js 开发是什么体验(Hybrid + Egg.js经验分享)

sdk可以轻松接入到我们的系统 用户授权演示: 编辑备注:因微信单篇文章最多不能上传三个以上视频限制,这块预览可跳转原文阅读查看 ?...framework:egg-moe About egg-moe egg-moe通过egg的扩展loader功能,将common目录下的service、model和config进行挂载 将所有公共部分业务全部放到...common下,平台私有业务放在各自目录 目录结构: ├─ common │ └── service │ └── common.js │ └── ... │ └── model...│ └── common.js │ └── ... ├─ frontend │ └── service │ └── frontend-custom.js │ └...backend-custom.js │ └── ... │ └── model │ └── backend-custom.js │ └── ...

2.9K20

JS中可能用得到的全部的排序算法

本篇有7k+字, 系统梳理了js中排序算法相关的知识, 希望您能喜欢....原文:JS中可能用得到的全部的排序算法 导读 排序算法可以称得上是我的盲点, 曾几何时当我知道Chrome的Array.prototype.sort使用了快速排序时, 我的内心是奔溃的(啥是快排, 我只知道冒泡啊...而 外层循环则像老板一样, 它告诉内层循环你需要不停的工作, 直到工作完成(也就是全部的元素排序完成)....将数组中插入位置之后的元素全部后移一位. 在指定位置插入第 i 个元素....本文作者:louis 本文链接:JS中可能用得到的全部的排序算法 参考文章 JS家的排序算法 - 简书 白话经典算法系列之三 希尔排序的实现 - MoreWindows Blog - 博客频道 - CSDN.NET

1.6K20
领券