我试图在一个小区域内将文本向右对齐。当容器较小时,它变为左对齐。有没有办法强迫它正确对齐?
div
{ float: right;
width: 100px;
height: 50px;
text-align: right;
border: thin solid black;
}
https://jsfiddle.net/a362zr54/
如果添加direction: rtl;
,它将执行
div {
float: right;
width: 100px;
height: 50px;
text-align: right;
border: thin solid black;
direction: rtl;
}
<div>
1testtesttesttesttesttesttesttesttest2
</div>
您可以尝试direction: rtl;
,但这可能会弄乱您的文本。
如果您的内容具有固定大小,如您的示例中所示。你也可以这样使用position:absolute;right:0;
:
.container { float: right;
width: 100px;
height: 50px;
border: thin solid black;
position:relative;
}
.content {
text-align: right;
position:absolute;
right:0;
}
<div class="container"><div class="content">
testtesttesttesttesttesttesttesttest
</div>
</div>
只需将direction: rtl;
添加到容器中。
演示https://jsfiddle.net/a362zr54/1/