如何使文本具有比其容器更大的宽度,以便在IE 11中向左移动而不是向右移动?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使文本具有比其容器更大的宽度,以便在IE 11中向左移动而不是向右移动?相关的知识,希望对你有一定的参考价值。

我在div中有一个文本,右边距为5px。如果容器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>
答案

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>

以上是关于如何使文本具有比其容器更大的宽度,以便在IE 11中向左移动而不是向右移动?的主要内容,如果未能解决你的问题,请参考以下文章

使用 CSS 共享具有相等填充的菜单项的宽度

多个图并排 - 如何使所有图的宽度相同? [复制]

如果图像比其容器宽,我如何居中?

具有绝对位置的 Flexbox 容器不适合 IE 中的内容宽度

如何使此代码适用于更大的数字?

如何使多个视图具有相同的宽度?