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- ...
随机推荐
- noip2008 总结
noip 2008题解 笨小猴 原题 笨小猴的词汇量很小,所以每次做英语选择题的时候都很头疼.但是他找到了一种方法,经试验证明,用这种方法去选择选项的时候选对的几率非常大!这种方法的具体描述如下:假设 ...
- Binding(二):控件关联和代码提升
上节我们讲到,使用Binding,我们可以关联后台代码中的属性,在某些情况下,我们可能需要将两个控件关联起来,借助Binding,我们也可以轻松的实现. 关联控件 设想这样一个场景,界面中有个Chec ...
- 在线博客转PDF电子书 | JS爬虫初探
最近在看一位大佬写的源码解析博客,平时上下班用手机看不太得劲,但是平板又没有网卡,所以就想搞个离线pdf版,方便通勤时间学习阅读. 所以,问题来了: 怎么把在线网页内容转成pdf? 这位大佬的博客是用 ...
- Linux命令大全之基本命令
命令提示符中: ~:表示家目录 #:表示超级用户 $:表示普通用户 命令 [选项] [参数] ls(list):查询目录中的内容 ls [选项] [文件或目录] -a:显示所有文件, ...
- 《手把手教你》系列基础篇(五)-java+ selenium自动化测试- 创建首个自动化脚本(详细教程)
1.简介 前面几篇宏哥介绍了两种(java和maven)环境搭建和三大浏览器的启动方法,这篇文章宏哥将要介绍第一个自动化测试脚本.前边环境都搭建成功了,浏览器也驱动成功了,那么我们不着急学习其他内容, ...
- c++实现希尔密码
实验名称: 希尔密码的实现(c++版;本文只以26个大写英文字符作为加密后的密文的可选项) 实验原理: 引用知识: 记 Zm={0,1,2,...,m-1} 定义1:设A为定义在集合Zm 上的n阶方阵 ...
- ABP Framework:移除 EF Core Migrations 项目,统一数据上下文
原文:Unifying DbContexts for EF Core / Removing the EF Core Migrations Project 目录 导读:软件开发的一切都需要平衡 动机 警 ...
- Java并发之ReentrantReadWriteLock源码解析(一)
ReentrantReadWriteLock 前情提要:在学习本章前,需要先了解笔者先前讲解过的ReentrantLock源码解析和Semaphore源码解析,这两章介绍了很多方法都是本章的铺垫.下面 ...
- Basic remains java入门题
Basic remains input: b p m 读入p进制的p,m, 求p%m ,以b进制输出 1 import java.util.*; 2 import java.math ...
- python对象类型
一.内置对象 对象类型 分类 是否可变 例子 数字 数值 否 123,3.12 字符串 序列 否 'test',"test's" 列表 序列 是 [1,2,3,[1,2,'test ...