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的中的效果，最终合成想要的效果图。这样实现起来复杂但是思路最清晰。
写在最后
以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长之路会持续更新一些工作中常见的问题和技术点。
