前言

　　最近群里的小伙伴去面试，遇到这样一个问题，面试官问："用 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的中的效果，最终合成想要的效果图。这样实现起来复杂但是思路最清晰。

写在最后

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

css--实现一个文字少时居中，文字换行时居左的样式的更多相关文章

  1. html 文字少则居中多则居左

    <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="index ...

  2. 纯CSS实现文字一行居中，多行左对齐的方法

    其实这种需求还是蛮常见的,主要用于产品列表页面,用于产品图片下面,显示产品的名称. 想要实现的效果为: 未知文字长度,当文字长度小于盒子宽度,也就是一行时,文字居中. 当文字长度大于盒子的宽度,会自动 ...

  3. 谈谈一些有趣的CSS题目（五）-- 单行居中，两行居左，超过两行省略

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  4. 谈谈一些有趣的CSS题目-- 单行居中，两行居左，超过两行省略

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  5. UIButton图片文字控件位置自定义(图片居右文字居左、图片居中文字居中、图片居左文字消失等)

    在开发中经常会碰到需要对按钮中的图片文字位置做调整的需求.第一种方式是通过设置按钮中图片文字的偏移量.通过方法setTitleEdgeInsets和setImageEdgeInsets实现 代码如下: ...

  6. css实现单行居中，两行居左

    居中需要用到 text-align:center,居左是默认值也就是text-align:left.要让两者结合起来需要多一个标签. <h2><p>单行居中,多行居左</ ...

  7. pageControl设置不居中显示，居左或居右

    UIPageControl控件,默认是居中显示的,如下图: 在很多的APP中,会看到pageControl是居左或居右显示的,如下图:   如何控制pageControl的位置显示呢? 设置为居右的代 ...

  8. div css 图片和文字上下居中对齐

    想要图片和文字水平居中对齐很容易,可今天做这个树的时候,遇到了要将图片上下居中.这下就不知道怎么搞. 拿手册看也看不出所以然来,不同的浏览器对DIV的支持不一个,目前最好的浏览器是Firefox. 这 ...

  9. background: inherit制作倒影、单行居中两行居左超过两行省略

    1.background: inherit;制作倒影 方法很多,但是我们当然要寻找最快最便捷的方法,至少得是无论图片怎么变化,div 大小怎么变化,我们都不用去改我们的代码. -webkit-box- ...

随机推荐

  1. 【NX二次开发】UF_OBJ_ask_display_properties获取对象所在层、获取对象颜色、获取对象是否隐藏、获取对象是否高亮，获取对象线宽、字体大小

    UF_OBJ_ask_display_properties 返回一个对象的显示属性(层.颜色.隐藏状态.线宽和字体). UF_OBJ_disp_props_p_t结构体: layer int 对象所在 ...

  2. 【UG二次开发】获取系统信息UF_ask_system_info

    获取系统信息可以使用这个函数UF_ask_system_info 下面是例子: 1 extern DllExport void ufsta(char *param, int *returnCode, ...

  3. 云原生时代的Java

    原文链接(作者:周志明):https://time.geekbang.org/column/article/321185 公开课链接:https://time.geekbang.org/opencou ...

  4. redis学习第二天

    Redis 在 2.8.9 版本之后添加了 HyperLogLog 结构 Redis HyperLogLog 是用来做基数统计的算法,HyperLogLog 的优点是,在输入元素的数量或者体积非常非常 ...

  5. theUnforgiven-冲刺第一天

    每天的冲刺博客分为scrum和PM报告两部分 吴邦天 负责项目整体构思以及对任务安排,承担项目具体设计,编码: 唐嘉诚 负责项目前端页面设计,承担整个项目的后端数据库搭建以及编码 周游 项目美化以及细 ...

  6. 第二篇CTF-MISC

    第一篇写成了日记,发布不了.第一篇CTF-MISC 04.坚持60S 附件下载下来,是个jar的文件,打开 耶?这是嘛呀? 反正没看懂,既然是jar文件,直接上jd-gui反编译一波试试 这么明显的f ...

  7. Restful规范-APIView源码分析

    目录 一.Restful规范 十条规范 二.drf的简单使用 三.APIView源码分析 CBV源码分析 APIView源码分析 一.Restful规范 Restful规范是一种web API接口的设 ...

  8. 互联网时代CRM软件帮助企业销售升级

    随着信息技术的发展,互联网+的浪潮逐渐改变了我们的生活.对于企业来说,他们的管理模式和服务模式也需要作出改变,企业不再满足只进行内部业务的优化和管理,传统CRM开始不再符合企业的需求.由此可见,在网络 ...

  9. .NET Core授权失败如何自定义响应信息？

    前言 在.NET 5之前,当授权失败即403时无法很友好的自定义错误信息,以致于比如利用Vue获取到的是空响应,不能很好的处理实际业务,同时涉及到权限粒度控制到控制器.Action,也不能很好的获取对 ...

  10. HCNA Routing&Switching之路由基础

    在开始聊路由之前,我们首先要明白在网络通讯里,什么是路由?什么是路由表.路由器以及网关的相关术语:路由简单讲就是指网络数据包从源头到目标的路径,主要用来为不同网络间通讯提供数据包转发依据:路由表就是多 ...