css--实现一个文字少时居中，文字换行时居左的样式
前言
最近群里的小伙伴去面试，遇到这样一个问题，面试官问："用 css 对一行文字进行布局，当文字不够换行的时候，这行文字要居中显示，当文字出现换行的时候，这行文字要靠左显示。"，遇到这样的需求一下束手无策，后来查下资料，哦，原来这样，这里总结一下实现的具体方法。
正文
1.需求分析与使用场景
具体需求分析：未知文字的长度的时候，当文字的长度小于盒子的宽度的时候，也就是一行可以放的下的时候，文字居中，当文字长度大于盒子宽度的时候，文字要实现自动换行，成为多行文字，此时文字要求左对齐。其实这样的需求在实际开发中也经常遇到，如下：
2.实现方法
下面针对文本框部分进行实现，不再添加图片样式。
（1）通过行内样式实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .wrap { margin-top: 10px; width: 200px; height: 100px; padding: 5px; background-color: skyblue; text-align: center; } .content { display: inline-block; text-align: left; word-break: break-all; } </style> </head> <body> <div class="wrap"> <span id="content" class="content">鸿星尔克</span> </div> <div class="wrap"> <span id="content" class="content">鸿星尔克板鞋2021夏季新款红星男鞋防滑耐磨休闲时尚经典涂鸦滑板鞋低帮旅游鞋</span> </div> <div class="wrap"> <span id="content" class="content">鸿星尔克ERKE 男防滑耐磨休闲跑步鞋运动鞋</span> </div> </body> </html>
实现效果如下：
上面的代码首先在外层包含框wrap中设置 text-algin：center；使得子元素能相对于父元素居中，然后子元素设置 display:inlne-block; 使得行内元素转化为行内块元素，此时可以给行内块设置 text-algin:left；使得文字在容器中放不下的时候出现换行居左。
（2）通过table表格实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .wrap { margin-top: 10px; width: 200px; height: 100px; padding: 5px; background-color: skyblue; } .content { display: table; margin: 0 auto; word-break: break-all; } </style> </head> <body> <div class="wrap"> <span id="content" class="content">鸿星尔克</span> </div> <div class="wrap"> <span id="content" class="content">鸿星尔克板鞋2021夏季新款红星男鞋防滑耐磨休闲时尚经典涂鸦滑板鞋低帮旅游鞋</span> </div> <div class="wrap"> <span id="content" class="content">鸿星尔克ERKE 男防滑耐磨休闲跑步鞋运动鞋</span> </div> </body> </html>
实现效果如上，这段代码是通过了给子元素设置了display:table;
（3）利用图层覆盖解决
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div,span{ padding: 0; } .wrap { margin-top: 10px; width: 200px; height: 100px; padding: 0 5px; background-color: skyblue; position: relative; } .content { } .hide{ position: absolute; text-align: center; background: skyblue; overflow: hidden; height: 20px; left: 0; top: 0; width: 100%; } </style> </head> <body> <div class="wrap"> <span class="content">鸿星尔克</span> <span class="hide">鸿星尔克</span> </div> <div class="wrap"> <span class="content">鸿星尔克板鞋2021夏季新款红星男鞋防滑耐磨休闲时尚经典涂鸦滑板鞋低帮旅游鞋</span> <span class="hide">鸿星尔克板鞋2021夏季新款红星男鞋防滑耐磨休闲时尚经典涂鸦滑板鞋低帮旅游鞋</span> </div> <div class="wrap"> <span class="content">鸿星尔克ERKE 男防滑耐磨休闲跑步鞋运动鞋</span> <span class="hide">鸿星尔克ERKE 男防滑耐磨休闲跑步鞋运动鞋</span> </div> </body> </html>
效果如下：
上面这段代码应该比较容易理解，但实现起来复杂，主要是重复写两次一样的文字，都属于行内元素，给hide的元素设置高度，当高度不够的时候设置隐藏溢出部分，并设置绝对定位，用于显示第一行数据，实现第一行居中效果，然后剩下行的显示content的中的效果，最终合成想要的效果图。这样实现起来复杂但是思路最清晰。
写在最后
以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长之路会持续更新一些工作中常见的问题和技术点。
