刚刚看教程的时候 让我拿程序员老哥给我出的题目，开始跃跃欲试，收到题目后真的是一筹莫展，不知道在何处下手，毕竟是新人小白，有点盲目自大了。
现在来解析下这个题目：
首先文本内容的居中 要怎么实现 ，都很清楚 text-align:center; 就可以轻松实现
文本的水平居中效果 ，
那么多行的时候怎么办呢？
这个需要嵌套一个P标签来实现
下面看代码
<style type="text/css">
.box{
/*给父元素盒子设置样式*/
border:chartreuse 1px solid;
width:200px;
/* height:600px; */
text-align:center;
/*当p标签的宽度小于父盒子的宽度是 ，p标签居中显示 ，也就达到了视觉上的文字居中显示的效果 当p大于一行时宽度和父盒子宽度一致 的 文字就视觉上居左显示了 */
padding:5px;
}
.box p{
display: inline-block;
/*使p的宽度根据文字变化*/
text-align:left;
/*内容左对齐*/
word-break:break-all;
/*强制性换行 ，解决单词过长内容溢出盒子的问题*/
}
</style>
</head>
<body>
<div class="box">
<p>
一行居中显示多行居左显示
一行居中显示多行居左显示
一行居中显示多行居左显示
一行居中显示多行居左显示
</p>
</div>
</body>
下面是效果图
一行文字居中：
多行文字居左显示：
英文单词过长使文字溢出容器:
word-break:break-all; 强制换行效果：
