zoukankan      html  css  js  c++  java
  • 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-

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

    column-count:

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

     column-gap:

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

    column-rule:

      这个属性吧,跟border:  一模一样。 也是设置边框的。只不过人家 设置的是多列的边框。

      column-rule:1px solid #000; (下面三个属性的缩写)

      border: 1px solid #000;

    还有 column-rule-  对应   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

  • 相关阅读:
    Delphi常用内存管理函数
    delphi中VirtualStringTree树使用方法
    Delphi常量
    delphi中的copy函数和pos函数
    delphi 中 delete的用法
    字软元件和位软元件的区别
    Virtual Treeview使用要点
    QTreeWidget搜索功能---遍历QTreeWidget
    C 语言使用 sqlite3
    opendir 与 readdir
  • 原文地址:https://www.cnblogs.com/yanggeng/p/11202769.html
Copyright © 2011-2022 走看看