登录/注册

首页 › 活字格专区 › 格友杂谈 › 查看内容

42 主题	62 帖子	1520 积分

Rank: 8 Rank: 8

积分: 1520

1795
金币
42
主题
62
帖子

最新发帖

[资源分享] 文本溢出显示省略号

Joseph.Wang
超级版主 / 发表于：2023-8-2 11:34 / 查看：2289 / 回复：3

本帖最后由 Joseph.Wang 于 2023-8-2 11:34 编辑

当文本内容过长时，你一般会怎么处理呢？

一种方式是调整列宽或者使用自适应，让内容在一行能完全显示，但这样在页面展示时可能不太美观；第二种就是使用多行文本框，让内容换行显示，这种也是常用的方法；其实还有一种方式，就是只显示前几个字，后面加上省略号，可以点击后弹出新页面进行详情的展示。接下来就分享一下这种方式在活字格的实现思路。

1. 通过公式字段截取，然后拼接“...”，页面绑定公式字段
image.png193782042.png

image.png193782042.png

2. 通过Excel公式截取，然后拼接“...”
image.png105924376.png

image.png105924376.png

3. 借助css，使用text-overflow: ellipsis属性
在使用时遇到了一些坑，最后发现是因为这个属性必须要在某些条件下才会生效

元素必须要有明确的宽度，因此要在css中设置width属性
必须同时设置overflow: hidden和white-space: nowrap

但当在超链接上设置时，发现又不生效了

经排查发现是因为超链接属于内联元素，还要设置display: block才能让宽度生效，经过一番折腾，终于实现了最终的效果
image.png457385253.png

image.png457385253.png

附件为工程文件，可以作为参考，对应的css也已经在工程文件中了，大家可以根据自己的实际场景使用不同的方案哈~~

省略号-9.0.4.0.fgcc

171.43 KB, 下载次数: 525

收藏

回复

3 个回复

倒序浏览

ikens
初级会员 / 发表于：2023-8-2 11:39:21 沙发

应该会用到感谢格友的分享

回复 使用道具举报

18992270255
高级会员 / 发表于：2023-8-29 14:25:29 板凳

插眼

回复 使用道具举报

jinxinwork
初级会员 / 发表于：2023-8-30 00:08:09 地板

感谢格友的分享

回复 使用道具举报