css3 多行文本多行文本缩略点击更多展开显示全部
比如我要实现如下效果:
20230930172619279762766.png
数据集名称展示一行,超出自动省略,末尾增加编辑 icon。点击编辑的 icon,换成 input 输入框
数据集描述最多展示三行,超出自动省略。末尾增加编辑 icon。点击编辑的 icon,换成 textarea 输入框
展示一行省略+icon 实现
单行省略实现,无非是这样
复制代码
文本溢出省略加提示,可以参考 https://github.com/zhoulujun/textOverflowTitle
多行文本省略
多行文本省略,css3 也有属性。主要靠 webkit-line-clamp
具体样式如下:
复制代码
如何做到自适应呢?
复制代码
具体参看:https://github.com/zhoulujun/text-expander
当然这个高度,是外面容器给的。
如何自适应比如给定高度,自定计算 webkit-line-clamp 为几行呢?
这个这个不能直接用 box.value.style.lineHeight,获取的为空字符串
具体代码如下:
复制代码
当然 1.2 是不对,也有可能是 1.5。这个代码么有通用性。这个需要给定行高。
然后通过高度除以函告,自动计算出展示几行。
参考文章:
CSS 实现多行文本“展开收起” https://juejin.cn/post/6963904955262435336
转载本站文章《css3多行文本多行文本缩略点击更多展开显示全部》,请注明出处:https://www.zhoulujun.cn/html/webfront/style/css3/2023_0930_8985.html
版权声明: 本文为 InfoQ 作者【zhoulujun】的原创文章。
原文链接:【http://xie.infoq.cn/article/862dfb08a4b5bf4631dc232ce】。文章转载请联系作者。
评论