js如何让table中的td内容过长显示为固定长度，多余部分用省略号代替

可以使用CSS中的`text-overflow`属性实现。

首先，设置td元素的宽度，超出部分自动隐藏，并且不能换行：

td {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 这里是关键，用省略号代替超出部分 */
}

这样，如果td内容过长，超出部分就会用省略号代替。

注意，`text-overflow`属性只在以下情况生效：

1. 元素必须有固定的宽度（或max-width）。
2. 元素必须有“text-overflow: ellipsis”属性。
3. 元素必须有“white-space: nowrap”属性。
4. 元素必须有“overflow: hidden”属性。

相关问题

table 设置 td文本超出为省略号时，设置 title 无效不显示的问题

对于这个问题，可以尝试使用 CSS 的 text-overflow 属性来解决。将 td 的 white-space 属性设置为 nowrap，然后设置 overflow:hidden 和 text-overflow:ellipsis 即可实现文本超出省略，并且 title 显示的效果。例如：

td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

同时，在 HTML 中设置 title 属性也非常重要，确保它能够被正确地显示。

antd 的table th 超出部分隐藏并显示省略号 ，鼠标悬停显示内容

可以使用 CSS 的 text-overflow 属性和 white-space 属性来实现。

首先，设置 th 的样式：

th {
  text-overflow: ellipsis; // 超出部分用省略号表示
  white-space: nowrap; // 不换行
  overflow: hidden; // 隐藏超出部分
}

然后，为了在鼠标悬停时显示完整内容，可以使用 CSS 的 :hover 伪类选择器来设置：

th:hover {
  white-space: normal; // 显示完整内容，允许换行
  overflow: visible; // 显示超出部分
}

这样，当鼠标悬停在 th 上时，就可以显示完整的内容了。