html 文本 多列显示,CSS3文本,字体和多列

文本

文本阴影

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:; //字体名称

src:[][,[]]*; //字体存放路径,可多个 format帮助浏览器识别

[font-weight:];

[font-style:

}

字体格式:

.ttf

.otf

.woff

.eot

.svg

字体应用

image.png

获取特殊字体网站 https://www.fontsquirrel.com/tools/webfont-generator

多列 (Multi-column)

columns

优先考虑列数

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

column-width

column-width: | auto;

column-count

column-count: | auto;

column-gap

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

column-gap: | 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;