html + css 文字左右对齐

Question

如下图中红框中的文字, 字数不同时有什么好的方式实现这种左右对齐

Answer 1

楼上的text-align-last有兼容性问题，可以用下面这样

html

<div class="justify">汪 星 人</div>
<div class="justify">那 美 克 星 人</div>
<div class="justify">地 球 男 人</div>

css

  .justify {
    text-align: justify;
    width: 200px;
    border: 1px solid blue;
    height: 18px;
  }

  .justify::after {
    content: "";
    display: inline-block;
    width: 100%;
  }

Answer 2

text-align-last:justify;

Answer 3

HTML提供了5种空格实体（space entity）        &zwnj; 没有兼容问题，可以完美实现上面的问题。

<span>你的名字</span>
<span>你的 好</span>

Answer 4

text-align: justify