html - 不能将文本对齐和宽度设置为 html 样式

Question

我只希望我的文本以 50 像素的宽度和右对齐方式显示。

以这种方式编码对我来说听起来很明显:

<div style="text-align:right;width:50px;">
  Myyyyyyyyyyyyy Teeeeeeeeeeeeeeeeeeeeeeext
</div>

适用 50px 宽度，但它的空间似乎保留在左侧而不是右侧。

我试图将此代码包含到另一个 div 中:

<div style="text-align:center;">
  <div style="text-align:right;width:50px;">
    Myyyyyyyyyyyyy Teeeeeeeeeeeeeeeeeeeeeeext
  </div>
</div>

没有区别。我应该怎么做？

Answer 1

Flexbox 可以做到这一点

div {
  display: flex;
  margin: 1em auto;
  border: 1px solid grey;
  background: palegoldenrod;
  width: 50px;
  justify-content: flex-end;
  text-align: right;
}

<div>
  Myyyyyyyyyyyyy Teeeeeeeeeeeeeeeeeeeeeeext
</div>