问题描述:
如何用css控制文本自动换行 ？
解析:
默认的就是自动换行
语法：
white-space : normal | pre | nowrap
取值：
normal : 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行
pre : 换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-pliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-pliant mode ，此属性可以使用，但是不会发生作用。结果等同于 normal 。
nowrap : 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。
div+css中实现文字自动换行代码如下：
1、CSS代码：#wrap{white-space:normalwidth:200px}。
2、DIV代码：<div >ddd1111111111111111111111111111111111</div>。
可以实现文字自动换行。
在Microsoft Excel软件单元格中，如果文本过长，则超出列宽以外的文本将被隐藏起来。
为了在保持列宽一定的情况下显示出单元格中的所有文本，可以设置文字自动换行。
HTML部分：
<div id="nav">
<ul>
<li>AAAA</li>
<li>BBBB</li>
<li>CCCC</li>
<li>DDDD</li>
<li>EEEE</li>
<li>FFFF</li>
</ul>
</div>
css部分：
#nav{
margin: 0 auto
border: 2px solid #00CED1
}
ul,li {
margin: 0px
padding: 0px
list-style: none
}
ul{
display: flex
flex-direction: row
flex-wrap: wrap
}
li{
border: 1px solid
width: 100px/*每个元素的初始化宽度*/
text-align: center
margin-top: 10px
margin-bottom: 10px
flex:auto /*这是关键*/
}
扩展资料：
Flex是Flexible Box的缩写，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
采用Flex布局的元素，被称为Flex容器(flex container)，简称“容器”。其所有子元素自动成为容器成员，成为Flex项目(Flex item)，简称“项目”。
容器默认存在两根主轴：水平方向主轴(main axis)和垂直方向交叉轴(cross axis)，默认项目按主轴排列。
main start/main end：主轴开始位置/结束位置；
cross start/cross end：交叉轴开始位置/结束位置；
main size/cross size：单个项目占据主轴/交叉轴的空间；
设置在容器上的属性有6种。
flex-direction
flex-wrap
flex-flow
justify-content
align-item
align-content
