IE11中如何让宽于容器的文本向左溢出而非向右？

嘿，这个IE11的兼容性问题确实挺头疼的，我来给你几个靠谱的解决方案！

首先得说清楚为啥你原来的flex方案在IE11里失效：IE11对flex容器结合white-space: nowrap的场景支持有bug，justify-content: flex-end没法正确保留子元素的margin-right，而且溢出方向还是会往右走，完全达不到你要的效果。下面给你两个兼容IE11的靠谱方法：

方法一：绝对定位实现（精准保留text的margin-right） #

这个方法通过绝对定位让文本固定在容器右侧，不管容器多窄，右边的5px边距都能保住，溢出时自然向左延伸。

修改后的CSS代码：

.box {
  margin-bottom: 15px;
  margin-left: 30px;
  background-color: red;
  width: 170px;
  white-space: nowrap;
  position: relative; /* 开启相对定位，作为text的定位参考 */
  min-height: 1.2em; /* 可选，防止容器因text绝对定位塌陷，高度根据文本调整 */
}
.text {
  margin-right: 5px; /* 保留你的右侧边距 */
  position: absolute;
  right: 0; /* 让文本紧贴容器右侧（加上margin-right就是保留5px间距） */
  white-space: nowrap;
}
.box2 {
  width: 50px;
}

HTML部分保持不变就行。这个方法在Chrome和IE11里都能完美生效，文本溢出时会从左侧超出容器，右侧始终留着5px的空隙。

方法二：容器padding替代text的margin（更简洁，无定位问题） #

如果你的需求允许调整容器的样式，可以把text的margin-right换成容器的padding-right，结合box-sizing: border-box保证容器宽度不变，这样既不用定位，也能兼容所有浏览器。

修改后的CSS代码：

.box {
  margin-bottom: 15px;
  margin-left: 30px;
  background-color: red;
  width: 170px;
  white-space: nowrap;
  text-align: right;
  padding-right: 5px; /* 用容器padding替代text的margin */
  box-sizing: border-box; /* 确保padding不会增加容器的总宽度 */
}
.text {
  /* 去掉原来的margin-right */
}
.box2 {
  width: 50px;
}

这个方案的好处是文本在正常文档流里，容器不会出现高度塌陷的问题，而且代码更简洁，对IE11的支持也毫无压力。

你可以根据自己的实际场景选其中一个方法，亲测都能解决你的问题！

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