css td 文字超出省略

CSS中的td文字超出省略是一种非常实用的技巧，可以让表格内容更加美观、简洁，同时也提高了阅读体验。下面我们来看看如何使用CSS实现td文字超出省略。

table {
  width: 100%;
  border-collapse: collapse;
}
td {
  white-space: Nowrap; /* 避免换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 文字超出部分以省略号代替 */
  max-width: 100px; /* 最大宽度，超出部分会被截断 */
}

上面的代码中，我们给table设置了宽度100%，使表格占满整个容器。同时使用border-collapse: collapse将边框合并，使表格更加美观。对td进行了样式设置，将white-space设置为Nowrap，防止文字换行；overflow设置为hidden，超出部分隐藏；text-overflow设置为ellipsis，文本溢出时用省略号代替。

此外，我们还可以根据实际需求设置max-width属性，当超出最大宽度时，文字会被截断。

通过以上代码，我们可以让表格中的文字更加简洁美观，提高阅读体验。