Firefox中text-overflow:ellipsis失效求助（含Bootstrap媒体类场景）

嘿，这个问题我太熟了！之前在项目里用Bootstrap媒体组件搭配text-overflow:ellipsis时，Firefox也跟我闹脾气——Chrome里标题和描述能乖乖截断加省略号，到Firefox就直接溢出容器。折腾了好一会儿终于找到靠谱的解决办法，给你捋捋：

核心原因 #

Firefox对text-overflow:ellipsis的生效条件比Chrome更严格，尤其是在Flex布局里（Bootstrap的.media类默认用Flex）：它要求元素所在的容器必须有明确的收缩限制，不然容器会被内容撑开，overflow:hidden根本触发不了。

亲测有效的解决方案 #

方案1：给.media-body添加min-width:0 #

Bootstrap的.media-body默认是flex-grow:1，但Firefox里Flex项的min-width默认是auto，这会导致.media-body被内容撑大，里面的标题自然没法截断。我们只需要打破这个限制：

/* 针对Firefox的Flex容器收缩修复 */
.media .media-body {
  min-width: 0;
}

/* 给标题/描述设置省略样式 */
.media .media-body h5,
.media .media-body p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

这样设置后，.media-body会根据父容器宽度自动收缩，里面的文本元素就能触发省略效果，Chrome和Firefox都能正常工作。

方案2：确保文本元素是块级/行内块级 #

如果你的标题是直接放在.media容器里（不是.media-body），那要给文本元素设置display:block或display:inline-block，同时限制宽度：

.media h5 {
  display: block;
  max-width: 100%; /* 限制宽度为父容器的100% */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Inline元素的overflow:hidden在Firefox里可能不生效，改成块级元素就能确保宽度受父容器约束。

方案3：检查所有父容器的Flex设置 #

如果.media本身还嵌套在另一个Flex容器里，那也要给上层的Flex容器添加min-width:0，不然上层容器被撑开，.media自然也不会收缩：

/* 假设.media的父容器是.flex-container */
.flex-container {
  display: flex;
  min-width: 0;
}

这些方法都是纯CSS解决，不需要额外依赖，我在多个项目里试过，Firefox 90+版本都能完美生效，Chrome也不会受影响～

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