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的中的效果，最终合成想要的效果图。这样实现起来复杂但是思路最清晰。

写在最后

 　　以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长之路会持续更新一些工作中常见的问题和技术点。

posted @   zaisy'Blog  阅读(2043)  评论(1)  编辑  收藏  举报
编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示