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的中的效果，最终合成想要的效果图。这样实现起来复杂但是思路最清晰。
写在最后
以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长踩坑之路会持续更新一些工作中常见的问题和技术点。
css--实现一个文字少时居中，文字换行时居左的样式的更多相关文章
- html 文字少则居中多则居左
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="index ...
- 纯CSS实现文字一行居中，多行左对齐的方法
其实这种需求还是蛮常见的,主要用于产品列表页面,用于产品图片下面,显示产品的名称. 想要实现的效果为: 未知文字长度,当文字长度小于盒子宽度,也就是一行时,文字居中. 当文字长度大于盒子的宽度,会自动 ...
- 谈谈一些有趣的CSS题目（五）-- 单行居中，两行居左，超过两行省略
开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...
- 谈谈一些有趣的CSS题目-- 单行居中，两行居左，超过两行省略
开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...
- UIButton图片文字控件位置自定义(图片居右文字居左、图片居中文字居中、图片居左文字消失等)
在开发中经常会碰到需要对按钮中的图片文字位置做调整的需求.第一种方式是通过设置按钮中图片文字的偏移量.通过方法setTitleEdgeInsets和setImageEdgeInsets实现 代码如下: ...
- css实现单行居中，两行居左
居中需要用到 text-align:center,居左是默认值也就是text-align:left.要让两者结合起来需要多一个标签. <h2><p>单行居中,多行居左</ ...
- pageControl设置不居中显示，居左或居右
UIPageControl控件,默认是居中显示的,如下图: 在很多的APP中,会看到pageControl是居左或居右显示的,如下图: 如何控制pageControl的位置显示呢? 设置为居右的代 ...
- div css 图片和文字上下居中对齐
想要图片和文字水平居中对齐很容易,可今天做这个树的时候,遇到了要将图片上下居中.这下就不知道怎么搞. 拿手册看也看不出所以然来,不同的浏览器对DIV的支持不一个,目前最好的浏览器是Firefox. 这 ...
- background: inherit制作倒影、单行居中两行居左超过两行省略
1.background: inherit;制作倒影 方法很多,但是我们当然要寻找最快最便捷的方法,至少得是无论图片怎么变化,div 大小怎么变化,我们都不用去改我们的代码. -webkit-box- ...
随机推荐
- What is maven？
Introduction Maven, a Yiddish word meaning accumulator(累加器) of knowledge, began as an attempt to sim ...
- MySQL8性能优化
MySQL8.0 引擎: 来看看MySQL8提供的引擎: 常用引擎: InnoDB:支持事务,行级锁,外键,崩溃修复,多版本并发控制:读写效率相对较差,内存使用相对较高,占用数据空间相对较大. MyI ...
- Zab协议 (史上最全)
文章很长,建议收藏起来,慢慢读! 疯狂创客圈为小伙伴奉上以下珍贵的学习资源: 疯狂创客圈 经典图书 : <Netty Zookeeper Redis 高并发实战> 面试必备 + 大厂必备 ...
- NoSQL：如何使用NoSQL架构构建实时广告系统
JDNoSQL平台是什么 JDNoSQL平台是一个分布式面向列的KeyValue毫秒级存储服务,存储结构化数据和非机构化数据,支持随机读写与更新,灵活的动态列机制,架构上支持水平扩容,提供高并发.低延 ...
- 禁止特定IP访问Oracle数据库
通过使用数据库服务器端的sqlnet.ora文件可以实现禁止指定IP主机访问数据库的功能,这对于提升数据库的安全性有很大的帮助,与此同时,这个技术为我们管理和约束数据库访问控制提供了有效的手段 在sq ...
- MIT6.828 Lab2 内存管理
Lab2 0. 任务介绍 你将编写一个内存管理代码.主要分为两大部分.分别对物理内存和虚拟内存的管理. 对于物理内存,每次分配内存分配器会为你分配4096bytes.也称为一个页(在大部分操作系统中一 ...
- 解决“与 Microsoft Exchange 的连接不可用，Outlook 必须联机或已连接才能完成此操作”
Microsoft Outlook 是一种用于发送和接收电子邮件的应用程序.由于其可靠性和各种使用类型,它在企业公司中非常受欢迎.Outlook 还可用于管理各种类型的个人数据,如日历约会.联系人.邮 ...
- ASP.Net Core Configuration 理解与源码分析
Configuration 在ASP.NET Core开发过程中起着很重要的作用,这篇博客主要是理解configuration的来源,以及各种不同类型的configuration source是如何被 ...
- POJ 2947 2947 Widget Factory 高斯消元
给出组件的数量n,给出记录的数量m(n就是变元数量,m是方程数量).每一个记录代表一个方程,求每个组件的生产天数. 高斯消元即可 #include <cstdio> #include &l ...
- CRM系统如何帮助企业管理多条业务线的？
在如今的市场环境中,许多企业为了提高销售效率,增加业绩收入,都会选择使用CRM客户关系管理系统来帮助进行对客户和销售的管理.CRM系统能够帮助企业在不同的产品线上同时开展营销活动.各个销售团队能够独立 ...