css中 如何让文本两端对齐

1. text-align：属性规定元素中的文本的水平对齐方式。
   left 把文本排列到左边。默认值：由浏览器决定。
   right 把文本排列到右边。
   center 把文本排列到中间。
   justify 实现两端对齐文本效果。
   inherit 规定应该从父元素继承 text-align 属性的值。

2. text-align-last：属性规定如何对齐文本的最后一行。
   注意：text-align-last 属性只有在 text-align 属性设置为 “justify” 时才起作用。
   auto 默认值。最后一行被调整，并向左对齐。
   left 最后一行向左对齐。
   right 最后一行向右对齐。
   center 最后一行居中对齐。
   justify 最后一行被调整为两端对齐。
   start 最后一行在行开头对齐（如果 text-direction 是从左到右，则向左对齐；如果 text-direction 是从右到左，则向右对齐）。
   end 最后一行在行末尾对齐（如果 text-direction 是从左到右，则向右对齐；如果 text-direction 是从右到左，则向左对齐）。
   initial 设置该属性为它的默认值。请参阅 initial。
   inherit 从父元素继承该属性。请参阅 inherit。

3. text-justify：属性规定当 text-align 被设置为 text-align 时的齐行方法。该属性规定如何对齐行文本进行对齐和分隔。
   auto 浏览器决定齐行算法。
   none 禁用齐行。
   inter-word 增加/减少单词间的间隔。
   inter-ideograph 用表意文本来排齐内容。
   inter-cluster 只对不包含内部单词间隔的内容（比如亚洲语系）进行排齐。
   distribute 类似报纸版面，除了在东亚语系中最后一行是不齐行的。
   kashida 通过拉伸字符来排齐内容。

HTML

<div class="ie" style="width: 200px; height: 200px; border: solid 1px #0094ff;">
   <p class="p1">测试测试测试测试</p>
   <p class="p2">测试测试测试测试测试</p>
</div>

CSS

.ie { text-align: justify; text-align-last: justify; text-justify: inter-ideograph; }
.p1:after { width: 100%; height: 0px; display: inline-block; overflow: hidden; content: ''; vertical-align: top; }
p { border: solid 1px red; margin: 0px; padding: 0px; line-height: 20px; height: 20px; }