单行文字居中 + 多行文字左对齐

[Dream4ever]

需求描述

如题。

解决方案

Google：single align center multiple lines align left，第一条链接就是所需的方案：How to make single-line text center align while multi-line left align?。

整体思路：

父元素作为容器，将子元素在水平方向上居中。

子元素的 display 属性设置为 inline-block，text-align 属性设置为 left。

这样当它的长度不超过一行时，其宽度为子元素本身字符所占宽度，加上父元素将子元素居中显示，就实现了单行居中的效果。

当它的长度超过一行时，其宽度为父元素为其设置的宽度，加上其本身的属性设置，就实现了多行左对齐的效果。

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  display: inline-block;
  text-align: left;
}