JS實現單行文本居中，多行文本居左

要實現的效果如上圖所示，在一個容器內多行文字爲靠左對齊，單行文字爲居中對齊。

HTML結構如下：

<div class="box">
    <p>多行文字內容多行文字內容多行文asdasd字sdfsdf123124容多行文字內容多行文字內容多行文字內容</p>
    <p>單行文字內容單行文字內容</p>
</div>

CSS：

/* text-align: center; 讓段落這個行內塊居中 */
.box{
    margin: 0 auto;
    margin-bottom: 40px;
    width: 300px;
    height: 300px;
    background: red;
    text-align: center;
}

/* text-align: left; 讓文字居左 */
.box p{
    margin-top: 20px;
    background: green;
    display: inline-block;
    text-align: left;
}

主要是利用text-algin這個屬性，官方說法爲：

text-align 屬性規定元素中的文本的水平對齊方式。

該屬性通過指定行框與哪個點對齊，從而設置塊級元素內文本的水平對齊方式。通過允許用戶代理調整行內容中字母和字之間的間隔，可以支持值 justify；不同用戶代理可能會得到不同的結果。

可以設置塊級元素內文本的水平對齊方式，除了可以設置文本的對齊方式外也可以設置行內元素或行內塊元素水平對齊，所以我們先將p標籤更改爲行內塊元素，然後分別給.box和p添加text-algin: center;和text-algin: center;聲明。

其中.box的text-algin: center;聲明是爲了讓box內的p標籤在box內水平居中，這樣就使得不滿一行的內容爲居中對齊。

p標籤的text-algin: left;聲明是爲了讓p標籤內的文字是居左對齊的，這樣使得p內文字滿一行自動換到下一行的時候是居左對齊的。