html - 如何使宽度大于其容器的文本在 IE 11 中向左移动，而不是向右移动？

Question

我在 div 中有一个带有 5px margin-right 的文本。如果容器 div 变窄，文本将移出容器，并且不再有 5px 边距。是否可以从右侧保留此边距并使文本从容器的左侧而不是右侧出来？添加 display: flex;justify-content: flex-end; 到 box 元素在 Chrome 中有效，但在 IE 11 中无效

这是示例

.box {
  margin-bottom: 15px;
  margin-left: 30px;
  background-color: red;
  width: 170px;
  white-space: nowrap;
  text-align: right;
}

.text {
  margin-right: 5px;
}

.box2 {
  width: 50px;
}

<div class="box box1">
  <div class="text">Sample text</div>
</div>
<div class="box box2">
  <div class="text">Sample text2</div>
</div>

Answer 1

IE 11 不支持 flexbox ，所以它不起作用也就不足为奇了。您可以将 .text float 在您的 .box 中并应用 clearfix到盒子里。

IE 整体支持很糟糕，因为如果我没记错的话，它不再维护了，应该没有必要支持它，除非它是你的元素所必需的。

参见示例:

.box {
  margin-bottom: 15px;
  margin-left: 30px;
  background-color: red;
  width: 170px;
  white-space: nowrap;
  text-align: right;
}

/* clearfix */
.box::after {
  content: "";
  clear: both;
  display: table;
}

.text {
  margin-right: 5px;
  float: right;
}

.box2 {
  width: 50px;
}

<div class="box box1">
  <div class="text">Sample text</div>
</div>
<div class="box box2">
  <div class="text">Sample text2</div>
</div>