表格单元格 2 行中的省略号 CSS

有时，在表格中我们需要在一个单元格内放置多个内容，但表格单元格默认只能显示一行。此时，我们可以使用省略号来表示内容的截断。本文将介绍使用 CSS 来实现表格单元格中省略号的方法。

单元格内容溢出省略号

如果单元格中的内容超过了单元格大小，CSS 中的 text-overflow 属性可以让文本溢出单元格的部分显示省略号 ...，具体可以通过以下代码来实现：

td {
  width: 100px;
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 溢出隐藏 */
  text-overflow: ellipsis; /* 超出显示省略号 */
}

这里设置了单元格宽度为 100px，同时禁止了单元格内文本的换行，并将文本超出部分进行了隐藏，并使用了 text-overflow: ellipsis 实现了在单元格中显示省略号。

示例效果如下：

| 序号 | 商品名称 | | ---- | ------------------------------ | | 1 | IPhone XR 64G 黑色... | | 2 | Macbook Pro Retina 15 512G... | | 3 | 宏碁笔记本电脑 Aspire E5... |

多行内容省略号

如果单元格中需要放置多行的内容，我们常常使用 CSS 中的 display: -webkit-box 属性来实现文本截断，并在结尾处加上省略号。

具体可以通过以下代码来实现：

td {
  width: 200px;
  word-wrap: break-word; /* 强制折行 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 显示行数 */
  overflow: hidden; /* 溢出隐藏 */
  text-overflow: ellipsis; /* 超出显示省略号 */
}

这里设置了单元格宽度为 200px，同时强制进行折行，并将单元格内文本显示为纵向排列，最多显示两行文本，并将超出的文本进行隐藏，并在结尾处显示省略号。

示例效果如下：

| 序号 | 商品名称 | | ---- | ------------------------------------------------------------ | | 1 | IPhone XR 64G 黑色
全新未拆封，保修期至明年3月
内存大小： 64G
颜色： 黑色... | | 2 | Macbook Pro Retina 15 512G
15寸，独立显卡，型号为 A1707
已开通 AppleCare 可以服务至明年... | | 3 | 宏碁笔记本电脑 Aspire E5
Intel Core i5 重新安装系统，运行速度较快
内存大小： 8G... |

总结

通过上述 CSS 属性的调整，我们可以实现表格单元格内文本内容的截断并显示省略号。这些属性不仅在表格中可以使用，平时也可以运用在其他元素上进行文本截断并显示省略号的操作。