CSS表格内容全部展示&省略

CSS表格内容全部展示&省略

• 全部展示

white-space: break-spaces;
word-break: break-all;

• 省略

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

• 鼠标悬浮显示内容

// 添加 title 属性
<td title="悬浮显示内容" ></td>

知识点1：white-space 属性设置如何处理元素内的空白：

知识点2： word-break 指定了怎样在单词内断行

https://developer.mozilla.org/zh-CN/docs/Web/CSS/word-break

知识点3：overflow：定义当一个元素的内容太大而无法适应 块级格式化上下文 时候该做什么

知识点4：text-overflow：确定如何向用户发出未显示的溢出内容信号。它可以被剪切，显示一个省略号（’…’，U + 2026 HORIZONTAL ELLIPSIS）或显示一个自定义字符串