cssでテキストの両端を揃える方法

text-align:属性は要素内のテキストの水平位置合わせを規定します.leftはテキストを左に並べます.デフォルト:ブラウザによって決定されます.rightテキストを右に並べます.センターはテキストを真ん中に並べます.justifyは両端揃えテキスト効果を実現します.inheritは、text-alignプロパティの値を親要素から継承すべきであることを規定します.

text-align-last:プロパティは、テキストの最後の行をどのように整列するかを指定します.注:text-align-lastプロパティは、text-alignプロパティが「justify」に設定されている場合にのみ機能します.autoデフォルト.最後の行が調整され、左に揃えられます.leftの最後の行を左に揃えます.right最後の行を右に揃えます.センターの最後の行を中央に揃えます.justifyの最後の行は両端揃えに調整されます.startの最後の行は行の先頭に揃えられます(text-directionが左から右の場合は左に揃え、text-directionが右から左の場合は右に揃えられます).end最後の行の行の末尾を揃えます(text-directionが左から右の場合、右に揃えます;text-directionが右から左の場合、左に揃えます).initialは、このプロパティをデフォルト値に設定します.「initial」を参照してください.inheritは親要素からこの属性を継承します.inheritを参照してください.

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; }