text(文本)
word-break word-wrap/overflow-wrap
Multi-column(多列)
文本几个常用的属性 ↓:
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