Bootstrap表格列内无序列表样式设置：实现按需换行与内容截断

嘿，我明白你想要的效果——让表格里的列表项不再每个独占一行，而是横向排列，内容过长时自动显示省略号，列宽不够时整体换行而非单个列表项换行。其实核心就是修改<ul>和<li>的默认块级样式，再加上文本溢出的控制，具体方案如下：

核心CSS代码 #

直接给你的.mylist类写自定义样式就行，不用改现有HTML结构：

/* 重置列表默认样式，适配表格布局 */
.mylist {
  list-style: none; /* 去掉默认的圆点标记 */
  padding-left: 0; /* 清除默认左内边距，避免表格内缩进 */
  margin: 0; /* 清除默认外边距，减少多余空间 */
  display: flex; /* 让列表项横向排列 */
  gap: 0.6rem; /* 列表项之间留一点间距，看着更舒服，可自行调整 */
  flex-wrap: wrap; /* 当表格列宽度不够时，整个列表自动换行 */
}

/* 控制单个列表项的文本溢出与显示 */
.mylist li {
  white-space: nowrap; /* 强制文本不换行 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  max-width: 110px; /* 限制每个列表项的最大宽度，可根据你的表格列宽调整 */
}

效果说明 #

• 原来的每个<li>会从独占一行变成横向排列，和你给出的示例A list... Another... And ano...一致；
• 单个列表项内容过长时，会自动截断并显示省略号；
• 如果表格列宽度实在不够容纳所有横向排列的列表项，整个列表会自动换行到下一行，而不是每个列表项单独换行；
• 去掉了列表默认的圆点和缩进，更贴合表格的紧凑布局。

如果希望列表项的宽度能自适应表格列的剩余空间，可以把.mylist li里的max-width改成flex: 1 1 auto;，这样每个列表项会自动均分可用空间，不过这种情况下可能需要根据实际显示效果调整间距哦。

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