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 一样,不同的是,文字超过边界,会自动换行。

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

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

是否能发挥作用 换行符 空格 自动换行 </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) 不做讲解, 不兼容

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

   text-align:

修改文本的对齐方式

  参数:

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

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

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

  

  word-spacing  letter-spacing

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

参数:

  normal:默认的

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

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

  text-indent

设置文本内容的 缩进

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

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

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

  text-size-adjust

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

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

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

   直接用百分比   %

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

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

Multi-column(多列)

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

columns:

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

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

第二个值:设置列数。

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

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

column-width:

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

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

column-count:

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

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

 column-gap:

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

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

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:

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

 column-span:

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

参数:默认是 none,

只有一个值可以填,  all

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

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

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

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

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

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

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

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

先看before  ↓

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

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

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

after:

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

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

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

参数:

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

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

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

  给自己加上 width  和  height

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

上一篇:MySQL数据类型和常用字段属性总结


下一篇:Nginx中rewrite实现二级域名、三级域名、泛域名、路径的重写