单行超出隐藏还是换行显示?
当文本内容过长,单行无法显示完全,并为了让页面显示美观,可以使用
单行超出隐藏或换行显示
这两种方案处理
单行超出隐藏
文本过长隐藏超出部分,hover展示全部文本内容
缺点:
- 需要鼠标移上去才能看到全部内容
- 无法复制全部内容,这个对于某些数据是很严重的问题
- 相对于换行,实现复杂
- 原生hover title只能显示简单字符,特殊样式无法实现
- title有最大字符限制
换行显示
文本限制在有限区域,超出换行展示
缺点就是有些人觉得换行占的行太多,不好看、丑
但笔者觉得应该遵从实用性优先
可以看看其他的案例
jira
腾讯云
中后台系统使用换行的更多
固定宽度还是自适应宽度?
关于表格的宽度设置方案探讨
固定宽度
表格单元格的宽度设置不好确定。过宽、过窄都会影响查看体验
而且手动设置增加工作量
自适应宽度
给table的宽度width: max-content
看似很灵活,但又有一个问题
这里可以设置一个宽度伸缩范围
min-width: 40px;
max-width: 240px;
word-break: break-all;
完美!