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