时间戳

首页 > 解决方案 > 如何使宽度大于其容器的文本在 IE 11 中向左移动而不是向右移动？

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

问题描述

我在 div 中有一个 5px margin-right 的文本。如果容器 div 变窄，则文本会移出容器，并且不再有 5px 的边距。是否可以从右侧保持此边距并使文本从容器的左侧流出，而不是正确的？添加display: flex;justify-content: flex-end;到框元素适用于 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>

标签： htmlcss

解决方案

IE 11 不支持flexbox，所以它不起作用也就不足为奇了。您可以将您的.text权利浮动在您的内部并对盒子.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>

推荐阅读