如何让表格单元格中带字符限制的文本实现响应式且不挤出左侧图片？

我来帮你搞定这个问题！你现在遇到的核心问题是：table-cell布局默认会根据内容自动调整宽度，再加上white-space: nowrap的设置，导致窄屏时文本直接溢出页面，还可能挤走左侧的图片。下面给你两个实用的解决方案，既能实现文本自动截断带省略号，又能保证图片始终在可视区域内。

方案一：改用Flexbox布局（推荐，更适合响应式） #

Flexbox是现代布局方案，比table-cell更灵活，能轻松实现你要的效果：

.alert {
  background: #ebeef2;
  display: flex; /* 切换为flex布局 */
  align-items: center; /* 垂直居中，替代table-cell的vertical-align */
  gap: 15px; /* 控制图片和文本的间距，替代padding-right */
}
.thumbnail {
  width: 70px; /* 固定图片容器宽度 */
  flex-shrink: 0; /* 防止图片容器被压缩 */
}
.thumbnail img {
  height: 70px;
  object-fit: cover;
  width: 100%; /* 让图片占满容器 */
}
.title {
  flex: 1; /* 让文本容器占满剩余可用空间 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 可选：如果需要限制最大字符数，可以保留max-width: 100ch，或者换成你想要的数值 */
}

为什么这个方案有效？ #

• flex:1让文本容器自动填充剩余空间，不会超出父容器宽度
• flex-shrink:0强制图片容器保持固定宽度，不会被文本挤变形
• gap属性比padding更直观地控制元素间距，避免布局混乱

方案二：保留table-cell布局，优化表格设置 #

如果你坚持要用table-cell布局，只需要给父容器加上table-layout: fixed和width:100%，就能强制表格按设置的宽度分配列空间：

.alert {
  background: #ebeef2;
  display: table;
  width: 100%; /* 让表格占满父容器宽度 */
  table-layout: fixed; /* 固定表格布局，优先按设置的列宽分配空间 */
}
.thumbnail {
  width: 70px;
  padding-right: 15px;
  white-space: nowrap; /* 防止图片容器被压缩 */
}
.thumbnail img {
  height: 70px;
  object-fit: cover;
}
.title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 因为table-layout: fixed，title会自动占剩余宽度，不需要额外设置max-width */
}

为什么这个方案有效？ #

• table-layout: fixed会让表格优先使用你设置的列宽，而不是根据内容自动调整
• 图片容器固定宽度后，无论文本多长，都不会被挤走，文本会在剩余空间内自动截断并显示省略号

两种方案都能解决你的问题，推荐优先用Flexbox，它在响应式场景下的表现更稳定，后续扩展也更方便。

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