css--實現一個文字少時居中，文字換行時居左的樣式

丶Serendipity丶發表於2021-08-01
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的中的效果，最終合成想要的效果圖。這樣實現起來複雜但是思路最清晰。

 

寫在最後

 　　以上就是本文的全部內容，希望給讀者帶來些許的幫助和進步，方便的話點個關注，小白的成長踩坑之路會持續更新一些工作中常見的問題和技術點。

相關文章