H5遇到这样一个需求，一个标签，文字单行的时候要居中显示，为了看着好看，文字换行以后要靠左对齐显示。
这种单行，多行的变化靠一种样式打天下已经适应不了了。
简单的变通了下，思路是，文字外面多包裹一层div，让div在单行的时候自己居中，也就带着文字居中了，div里给文字居左的样式，当文字超过一行，div就会充满父标签，文字就会按照左对齐的方式显示了。上代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>单行居中 多行靠左</title> </head> <body> <div style="width: 300px; text-align: center; background-color: #da8ec5"> <div>我是处在中间的文字</div> </div> <p></p> <div style="width: 300px; text-align: center; background-color: #da8ec5"> <div>我是较多的文字，遇到需要换行的时候，按照上面的写法不足一行的文字也会被居中，这是个不好的体验</div> </div> <p></p> <div style="width: 300px; display: flex; justify-content: center; background-color: #da8ec5"> <div style="text-align: left">我是较多的文字，我的父亲是居中的，但我是靠左对齐的，这样不足一行的时候，我还是居中的，换行以后，我被撑满，靠左对齐就生效了。</div> </div> <p></p> </body> </html>
