容器中文本与箭头溢出问题求助：如何避免溢出至相邻单元格？

嘿，我来帮你搞定这个文本和箭头溢出相邻单元格的问题！你说设置了min-width没生效，大概率是表格默认的布局规则在捣乱，结合小屏幕适配的方案给你整理好了：

1. 先修正表格的基础布局逻辑 #

表格默认的table-layout: auto会让宽度完全由内容决定，导致你设置的min-width被忽略。先给表格加上这个规则：

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

这样表格会优先遵循你定义的宽度约束，不再被内容随意撑开。

2. 处理单元格内的文本与箭头溢出 #

给包含文本和箭头的目标单元格添加换行与溢出控制：

.target-cell {
  min-width: 150px; /* 替换成你需要的最小宽度 */
  overflow-wrap: break-word; /* 让长文本自动换行 */
  white-space: normal; /* 取消可能存在的强制不换行设置 */
}

如果箭头是通过伪元素（比如::after）实现的，调整它的显示方式避免挤在一起：

.target-cell::after {
  content: "→";
  margin-left: 6px;
}

3. 媒体查询适配小屏幕场景 #

在屏幕宽度小于768px时，进一步优化布局，彻底避免溢出：

@media (max-width: 768px) {
  table {
    font-size: 14px; /* 缩小字体节省空间 */
  }
  .target-cell {
    min-width: 120px; /* 适当调小最小宽度适配小屏 */
    padding: 6px 4px; /* 减少内边距释放空间 */
  }
  /* 小屏幕下让箭头单独换行，避免和文本挤在一起 */
  .target-cell::after {
    display: block;
    margin-left: 0;
    margin-top: 4px;
  }
}

进阶响应式方案（极小屏幕适配） #

如果需要适配手机这类极小屏幕，可以把表格改成纵向卡片式布局，彻底消除单元格溢出问题：

@media (max-width: 480px) {
  table, thead, tbody, tr, th, td {
    display: block;
  }
  tr {
    margin-bottom: 12px;
    border-bottom: 1px solid #eee;
  }
  td {
    text-align: right;
    position: relative;
    padding-left: 50%;
  }
  td::before {
    content: attr(data-label); /* 用单元格的data-label属性显示表头内容 */
    position: absolute;
    left: 0;
    padding-left: 8px;
    font-weight: 600;
    text-align: left;
  }
}

这个方案需要给每个<td>添加data-label属性，比如<td data-label="项目名称">你的文本内容→</td>，小屏幕下会自动变成“项目名称：你的文本内容→”的纵向布局，完全不会溢出。

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