还在用文本超出隐藏吗?竟然有这么多缺点

35 阅读1分钟

单行超出隐藏还是换行显示?

当文本内容过长,单行无法显示完全,并为了让页面显示美观,可以使用

单行超出隐藏或换行显示

这两种方案处理

单行超出隐藏

文本过长隐藏超出部分,hover展示全部文本内容

image.png

缺点:

  1. 需要鼠标移上去才能看到全部内容
  2. 无法复制全部内容,这个对于某些数据是很严重的问题
  3. 相对于换行,实现复杂
  4. 原生hover title只能显示简单字符,特殊样式无法实现
  5. title有最大字符限制

换行显示

文本限制在有限区域,超出换行展示

缺点就是有些人觉得换行占的行太多,不好看、丑

但笔者觉得应该遵从实用性优先

可以看看其他的案例

jira

image.png

腾讯云

image.png

中后台系统使用换行的更多

固定宽度还是自适应宽度?

关于表格的宽度设置方案探讨

固定宽度

表格单元格的宽度设置不好确定。过宽、过窄都会影响查看体验

而且手动设置增加工作量

image.png

image.png

自适应宽度

给table的宽度width: max-content

image.png

看似很灵活,但又有一个问题

image.png

这里可以设置一个宽度伸缩范围

min-width: 40px;

max-width: 240px;

word-break: break-all;

image.png

完美!