css3系列之text的常用属性 和 Multi-column(多列)

text(文本)　　　　

white-space：

word-break　　word-wrap/overflow-wrap

text-align:

word-spacing　　letter-spacing

text-indent

text-size-adjust

Multi-column(多列)

columns

column-width

column-gap

column-rule

column-rule-width

column-rule-style

column-rule-color

column-span

column-break-before

column-break-after

column-break-inside

文本几个常用的属性 ↓：

　　white-space：

　　　　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) 不做讲解， 不兼容

　　　text-align:

修改文本的对齐方式

　　参数：

start　　end　　left　　right　　center　　justify　(　match-parent　　justify-all　) 最后两个的兼容情况也是惨不忍睹。 不做讲解

怎么用呢，也是比较简单的，例如 p标签里面的文字需要对齐。 p{text-align: center} 就可以，哪里的文本需要对齐，就写在哪里

　　

　　word-spacing　　letter-spacing

前者调节 单词之间的间隙，后者调节字符之间的间隙 

参数：

　　normal：默认的

　　　　　　直接用 px  就可以。可以接受负值。

　　text-indent

设置文本内容的 缩进

　　可以填px  也可以填 %，一般我们都填 2em

还有两个参数(css3)：each-line　　hanging  不过这两个参数的兼容性效果也是惨不忍睹。所以目前也没用

　　text-size-adjust

设置文本大小根据 窗口的大小而改变。

参数：auto(默认)  文本大小会根据 窗口的大小而改变。

　　　none：文本大小不会根据 窗口的大小而改变。

　　　直接用百分比   %

　　看起来很美好的一个属性，结果，由于兼容性的原因， 也用不了。

Multi-column(多列)

column吧，算是一种布局，但是你非说他是布局的话，他应用的也比较少，用它可以实现，像报纸那种布局，也就是竖列展示的

columns：

　　　除table外的非替换块级元素, table cells, inline-block这些元素外，可以使用

第一个值：设置每列的宽度。

第二个值：设置列数。

　　下面的例子，设置了  columns：300px 3；  也就是 成3列出现， 每列 300px，但是你仔细观察，在改变窗口大小的时候， 也并不是会一直固定的， 会随着 窗口的大小而压缩，拉伸宽度， 和列数， 跟background-repeat：round; 的效果是一样的。

column-width:

　　跟上面的值是一样的，不过他是设置 宽和 列，这个只是单独设置 宽。

column-count:

　　单独设置 列数，设置好的列数，并不会随着父元素的宽的改变而改变， 是几列，就一直几列

 column-gap:

　　设置每列与每列之间的间隙

column-rule:

　　这个属性吧，跟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:

 column-span：

　　除浮动和绝对定位之外的块级元素， 也就是说 行级标签能用。

参数：默认是 none，

只有一个值可以填，  all

column-break-before:　在元素之前断开，重新 开启新的一列

column-break-after:　　在元素之后断开，重新 开启新的一列

参数： (这两个属性的兼容情况不怎么好，webkit内核支持。使用的时候加上 -webkit)

　　auto：默认值，也不禁止 断行起新列，也不强迫断行 起新列。

　　always:  before: 是在 之前断开，起新列。  after: 是在之后断开，起新列，

　　avoid: 也就是不让他断开 起新列。

先看before  ↓

after：

最后一个属性，cloumn-break-inside:

　　阻止元素的内部发生断开起新列的 效果

参数：

　　auto：默认值(也就是佛系。爱咋地咋地)

　　avoid : 避免在元素内部断行并产生新列

最后关于 clomn-width 的宽度不准的解决办法：

　　给自己加上 width  和  height