一段文字，单行的时候居中，多行的时候居左

1.今天发现一个很有趣的效果
https://demo.cssworld.cn/3/2-5.php

文字内容


更多文字

CSS：
.box {
padding: 10px;
background-color: #cd0000;
text-align: center;
}
.content {
display: inline-block;
text-align: left;
}

js省略

是某个小伙伴问的，为什么文字单行居中，多行居左，起初我也很疑惑，因为，之前没有注意这类问题，审查元素发现，content的 text-align: left;是没有被覆盖，也没有继承父元素的居中，但文字还是居中

TIM截图20190521155340.jpg

为了更清楚观察元素，我给.content加了一个背景，果然豁然开朗，一切就明白了

TIM截图20190521155515.jpg

TIM截图20190521160147.jpg

.content设置了 display: inline-block;变成了行内块级元素，单行的时候相当远一个行内元素，没有宽高，居左样式是执行了，但没效果，虽然没有继承父元素的样式，但是被父元素影响，居中
但是多行时，元素被撑开，有了宽高，相当于一个块级元素，自然，居左的属性就执行了

所以text-align: left;是 一直被执行的，只是因为inline-block;而影响了