css实现⽂字较少时居中，⽂字较多换⾏时左对齐
⼀、需求分析与使⽤场景
  具体需求分析：未知⽂字的长度的时候，当⽂字的长度⼩于盒⼦的宽度的时候，也就是⼀⾏可以放的下的时候，⽂字居中，当⽂字长度⼤于盒⼦宽度的时候，⽂字要实现⾃动换⾏，成为多⾏⽂字，此时⽂字要求左对齐。其实这样的需求在实际开发中也经常遇到，⽐如淘宝⼀些购物列表。
⼆、实现⽅法
  1、通过⾏内样式实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css实现⽂字较少时居中，⽂字较多换⾏时左对齐</title>
<style>
*{
margin: 0;
padding: 0;
}
.main{
width: 300px;
height: 500px;
border: 1px solid #000;
margin: 0 auto;
margin-top: 20px;
}
.wrap{
width: 135px;
height: 200px;
border: 1px solid #f00;
margin-left: 10px;
margin-top: 10px;
float: left;
box-sizing: border-box;
overflow: hidden;
text-align: center;
}
.img{
width: 135px;
height: 140px;
background: rgba(0,0,0,0.4);
}
.wrap p{
font-size: 13px;
display: inline-block;
text-align: left;
word-break: break-all;
padding: 0 5px;
}
</style>
</head>
<body>
<div class="main">
<div class="wrap">
<div class="img"></div>
<p>⽂字⽂字</p>
</div>
<div class="wrap">
<div class="img"></div>
<p>⽂字过多⽂字过多⽂字过多⽂字过多⽂字过多⽂字过多</p>
</div>
<div class="wrap">
<div class="img"></div>
<p>⽂字过多⽂字过多⽂字过多⽂字过多⽂字过多⽂字过多</p>
</div>
</div>
</body>
</html>
  实现效果如上图所⽰（需求分析与使⽤场景⽰例）：
    上⾯的代码⾸先在外层包含框wrap中设置 text-algin：center；使得⼦元素能相对于⽗元素居中，然后⼦元素设置 display:inlne-
block; 使得⾏内元素转化为⾏内块元素，此时  可以给⾏内块设置 text-algin:left；使得⽂字在容器中放不下的时候出现换⾏居左。 
  2、通过table表格实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css实现⽂字较少时居中，⽂字较多换⾏时左对齐</title>
<style>
*{
margin: 0;
padding: 0;
}
.main{
width: 300px;
height: 500px;
border: 1px solid #000;
margin: 0 auto;
margin-top: 20px;
}
.wrap{
width: 135px;
height: 200px;
border: 1px solid #f00;
margin-left: 10px;
margin-top: 10px;
float: left;
box-sizing: border-box;
overflow: hidden;
/* text-align: center; */
}
.img{
width: 135px;
height: 140px;
background: rgba(0,0,0,0.4);
}
.wrap p{
font-size: 13px;
/* display: inline-block;
text-align: left;
word-break: break-all; */
padding: 0 5px;
display: table;
margin: 0 auto;
word-break: break-all;
}
</style>
</head>
<body>
<div class="main">
text align center
<div class="wrap">
<div class="img"></div>
<p>⽂字⽂字</p>
</div>
<div class="wrap">
<div class="img"></div>
<p>⽂字过多⽂字过多⽂字过多⽂字过多⽂字过多⽂字过多</p>
</div>
<div class="wrap">
<div class="img"></div>
<p>⽂字过多⽂字过多⽂字过多⽂字过多⽂字过多⽂字过多</p>
</div>
</div>
</body>
</html>
实现效果如上，这段代码是通过给⼦元素设置display:table来实现;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。