爱站程序员基地
前言
最近群里的小伙伴去面试，遇到这样一个问题，面试官问：\”用 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的中的效果，最终合成想要的效果图。这样实现起来复杂但是思路最清晰。
写在最后
以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长踩坑之路会持续更新一些工作中常见的问题和技术点。
