css--实现一个文字少时居中，文字换行时居左的样式

最近群里的小伙伴去面试，遇到这样一个问题，面试官问："用 css 对一行文字进行布局，当文字不够换行的时候，这行文字要居中显示，当文字出现换行的时候，这行文字要靠左显示。"，遇到这样的需求一下束手无策，后来查下资料，哦，原来这样，这里总结一下实现的具体方法。

#1.需求分析与使用场景

具体需求分析：未知文字的长度的时候，当文字的长度小于盒子的宽度的时候，也就是一行可以放的下的时候，文字居中，当文字长度大于盒子宽度的时候，文字要实现自动换行，成为多行文字，此时文字要求左对齐。其实这样的需求在实际开发中也经常遇到，如下：

#2.实现方法

下面针对文本框部分进行实现，不再添加图片样式。

#（1）通过行内样式实现

复制    <span class="hide">鸿星尔克板鞋2021夏季新款红星男鞋防滑耐磨休闲时尚经典涂鸦滑板鞋低帮旅游鞋</span>
</div>
<div class="wrap">
    <span class="content">鸿星尔克ERKE 男防滑耐磨休闲跑步鞋运动鞋</span>

    <span class="hide">鸿星尔克ERKE 男防滑耐磨休闲跑步鞋运动鞋</span>
</div>

效果如下：

上面这段代码应该比较容易理解，但实现起来复杂，主要是重复写两次一样的文字，都属于行内元素，给hide的元素设置高度，当高度不够的时候设置隐藏溢出部分，并设置绝对定位，用于显示第一行数据，实现第一行居中效果，然后剩下行的显示content的中的效果，最终合成想要的效果图。这样实现起来复杂但是思路最清晰。

以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长之路会持续更新一些工作中常见的问题和技术点。