css3系列之text的常用属性 和 Multi-column(多列)
text(文本)
word-break word-wrap/overflow-wrap
Multi-column(多列)
文本几个常用的属性 ↓：
normal：默认值。首空格会被去掉，空格在文字的中间，多个会被合成一个，是否换行有换行规则决定。
pre：原封不动的，保留你输入的空格，换行等，而且文字超出容器的边界时，不会换行。
nowrap：跟 normal一样。不同的是会强制所有文字 都在同一行内显示。
pre-line：跟normal一样。会保留输入时的 换行。
pre-wrap：跟pre 一样，不同的是，文字超过边界，会自动换行。
| 是否能发挥作用 | 换行符 | 空格 | 自动换行 | </br>、nbsp; |
|---|---|---|---|---|
| normal | × | ×（合并） | √ | √ |
| nowrap | × | ×（合并） | × | √ |
| pre | √ | √ | × | √ |
| pre-wrap | √ | √ | √ | √ |
| pre-line | √ | ×（合并） | √ | √ |
word-break word-wrap/overflow-wrap 两个属性，相同的。用谁都可以
这上面的属性，是修改换行的规则的，效果一样的：
word-break：normal | keep-all | break-all | break-word
word-wrap, overflow-wrap：normal | break-word | break-spaces (break-spaces) 不做讲解， 不兼容
修改文本的对齐方式
参数：
start end left right center justify ( match-parent justify-all ) 最后两个的兼容情况也是惨不忍睹。 不做讲解
怎么用呢，也是比较简单的，例如 p标签里面的文字需要对齐。 p{text-align: center} 就可以，哪里的文本需要对齐，就写在哪里
前者调节 单词之间的间隙，后者调节字符之间的间隙
参数：
normal：默认的
直接用 px 就可以。可以接受负值。
设置文本内容的 缩进
可以填px 也可以填 %，一般我们都填 2em
还有两个参数(css3)：each-line hanging 不过这两个参数的兼容性效果也是惨不忍睹。所以目前也没用
设置文本大小根据 窗口的大小而改变。
参数：auto(默认) 文本大小会根据 窗口的大小而改变。
none：文本大小不会根据 窗口的大小而改变。
直接用百分比 %
看起来很美好的一个属性，结果，由于兼容性的原因， 也用不了。
column吧，算是一种布局，但是你非说他是布局的话，他应用的也比较少，用它可以实现，像报纸那种布局，也就是竖列展示的
除table外的非替换块级元素, table cells, inline-block这些元素外，可以使用
第一个值：设置每列的宽度。
第二个值：设置列数。
下面的例子，设置了 columns：300px 3； 也就是 成3列出现， 每列 300px，但是你仔细观察，在改变窗口大小的时候， 也并不是会一直固定的， 会随着 窗口的大小而压缩，拉伸宽度， 和列数， 跟background-repeat：round; 的效果是一样的。
跟上面的值是一样的，不过他是设置 宽和 列，这个只是单独设置 宽。
单独设置 列数，设置好的列数，并不会随着父元素的宽的改变而改变， 是几列，就一直几列
设置每列与每列之间的间隙
这个属性吧，跟border： 一模一样。 也是设置边框的。只不过人家 设置的是多列的边框。
column-rule：1px solid #000； (下面三个属性的缩写)
border: 1px solid #000;
还有 column-rule-width: 对应 border-width：
column-rule-style: 对应 border-style:
column-rule-color: 对应 border-color:
除浮动和绝对定位之外的块级元素， 也就是说 行级标签能用。
参数：默认是 none，
只有一个值可以填， all
column-break-before: 在元素之前断开，重新 开启新的一列
column-break-after: 在元素之后断开，重新 开启新的一列
参数： (这两个属性的兼容情况不怎么好，webkit内核支持。使用的时候加上 -webkit)
auto：默认值，也不禁止 断行起新列，也不强迫断行 起新列。
always: before: 是在 之前断开，起新列。 after: 是在之后断开，起新列，
avoid: 也就是不让他断开 起新列。
先看before ↓
after：
阻止元素的内部发生断开起新列的 效果
参数：
auto：默认值(也就是佛系。爱咋地咋地)
avoid : 避免在元素内部断行并产生新列
最后关于 clomn-width 的宽度不准的解决办法：
给自己加上 width 和 height
