前言
最近群裡的小夥伴去面試，遇到這樣一個問題，面試官問："用 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的中的效果，最終合成想要的效果圖。這樣實現起來複雜但是思路最清晰。
寫在最後
以上就是本文的全部內容，希望給讀者帶來些許的幫助和進步，方便的話點個關注，小白的成長踩坑之路會持續更新一些工作中常見的問題和技術點。
