如何使文本具有比其容器更大的宽度，以便在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中向左移动而不是向右移动？的主要内容，如果未能解决你的问题，请参考以下文章