今天看《CSS世界》看到一个例子:页面某个模块的文字内容是动态的,可能是几个字,也可能是一句话。然后,希望文字少的时候居中显示,文字超过一行的时候居左显示。该如何实现?

image-20220815150532881

image-20220815150606468

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            width: 240px;
            margin: 20px auto;
            color: #fff;
        }

        .box{
            padding: 10px;
            background-color: #cd0000;
            text-align: center;
        }

        .content{
            display: inline-block;
            text-align: left;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="box">
        <p class="content">文字内容</p>
    </div>
</div>
</body>
</html>

我CSS太弱,第一眼看到这个例子还有点没有反应过来。想着为什么父容器设置了text-align: center,为什么文字多的时候,又变为靠左显示了。用控制台研究了一下发现,因为p标签被设置为display: inline-block,它的宽度是由内容决定的。

文字较少时:p标签居中显示,文字向左排布。但是整体还是居中显示的。

文字较多导致换行时:p标签居中显示,文字向左排布。但是由于p标签整体宽度变大了,最后一行的文字向左显示就很明显了。

感觉挺妙的,还是要提高自己的CSS功底呀。