表格内列表文本溢出问题：如何通过CSS修复？

针对表格中列表文本溢出的问题，可以通过以下CSS调整解决：

修改后的完整CSS代码 #

.pkgtable {
  width: 100%;
  table-layout: fixed;
}

.pkgtable th,
.pkgtable td {
  vertical-align: top;
  padding: 8px;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.pkgtable ul {
  font-size: 10px;
  line-height: 20px;
  width: 100%;
  list-style-type: square;
  padding-left: 20px;
  margin: 0;
}

.pkgtable li {
  text-align: left;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

关键修改说明 #

• 单元格溢出控制：给.pkgtable th和.pkgtable td添加overflow-wrap: break-word（兼容旧浏览器补充word-wrap: break-word），强制长文本或长单词在单元格内自动换行，避免溢出。同时增加内边距padding: 8px，让内容和单元格边框保持距离，提升可读性。
• 列表边距调整：移除列表的负外边距margin-left: -12px，改用padding-left: 20px并清除默认外边距margin: 0，确保列表符号和内容都在单元格范围内，不会超出边界。
• 列表项文本处理：给.pkgtable li添加overflow-wrap: break-word，保证单个列表项的长文本也能正常换行。

可选：文本溢出显示省略号 #

如果希望文本超出单元格时显示省略号（而非换行），可将单元格样式替换为：

.pkgtable th,
.pkgtable td {
  vertical-align: top;
  padding: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

该方案适合短文本场景，列表内容推荐优先使用换行方案。

内容的提问来源于stack exchange，提问作者Joshua