文本

文本阴影

text-shadow:h-shadow v-shadow blur color;    //水平偏移  垂直偏移  模糊度  颜色

文本轮廓

基本上浏览器不支持

text-outline:thickness blur color    //宽度值  模糊度  颜色  

换行

word-break:属性规定自动换行的处理方法

word-break:normal | break-all | keep-all;    //默认换行规则  该换行的地方换行  半角空格,连字符换行

word-wrap:属性允许长单词或URL地址换行到下一行

word-wrap:normal | break-word    //默认   裁切到下一行

新文本属性

text-align-last:属性规定如何对齐文本的最后一行

text-align-last:auto | left | right | center | justify | start | end | initial | inherit

text-overflow:属性规定当文本溢出包含元素时发生的事情
加上overflow:hidden;

text-overflow:clip | ellipsis | string    //剪切  省略  自定义符号

@font-face

@font-face{
    font-family:<YourWebFontName>;      //字体名称
    src:<source>[<format>][,<source>[<format>]]*;   //字体存放路径,可多个 format帮助浏览器识别
    [font-weight:<weight>];
    [font-style:<style>];
}

字体格式:
.ttf
.otf
.woff
.eot
.svg

字体应用

image.png

多列 (Multi-column)

columns

优先考虑列数

columns:<'column-width'> || <'column-count'>;    //每列的宽度  列数

column-width

column-width:<length> | auto;

column-count

column-count:<integer> | auto;

column-gap

如果不设置将与字体大小相同

column-gap:<length> | normal

column-rule

设置列与列之间的边框

column-rule:<'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>;

column-span

是否横跨所有列

column-span:none | all;

column-fill

所有列的高度是否统一(现在基本都不支持)

column-fill:auto | balance;      //自适应  所有列的高度以其中最高的一列统一

column-break

换行

column-break-before:auto | always | avoid;
column-break-after:auto | always | avoid;
column-break-inside:auto | avoid;