Question

我试图在一个小区域内将文字对齐。当容器很小时，它会左对齐。无论如何强迫它正确对齐？

div 
{ float: right;
width: 100px;
height: 50px;
text-align: right;
border: thin solid black;
}

https://jsfiddle.net/a362zr54/

Answer 1

如果您添加direction: rtl;，则会执行此操作

div { 
  float: right;
  width: 100px;
  height: 50px;
  text-align: right;
  border: thin solid black;
  direction: rtl;
}

<div>
1testtesttesttesttesttesttesttesttest2
</div>

Answer 2

您可以尝试direction: rtl;，但这可能会弄乱您的文字。

如果您的内容具有固定大小，例如您的示例。你也可以像这样使用position:absolute;right:0;：

＆＃13;

.container { float: right;
width: 100px;
height: 50px;
border: thin solid black;
position:relative;
}
.content {
  text-align: right;
  position:absolute;
  right:0;

}

＆＃13;

<div class="container"><div class="content">
testtesttesttesttesttesttesttesttest
</div>
</div>

＆＃13;

Answer 3

只需将direction: rtl;添加到容器中即可。

演示 https://jsfiddle.net/a362zr54/1/

text-align在小宽度div中

3 个答案: