css字体及css文本控制

-----字体样式-----

 

---------文字样式

font-family: ””;

---------文字大小

font-size: 0 - 99999px/em/rem;

---------文字粗细

font-weight: 0-900 / bold(加粗);

---------文字颜色

color: #000000 - #FFFFFF / red blue green… ;

---------文字风格

font-style: norma / italic / oblique; 默认/斜体/倾

---------小型大写字母

font-variant: normal / small-caps; 默认/小型大写字母

---------font复合样式写法

font: size  family;  字体大小  文字样式

 

-----文本调整-----

 

---------水平调整

text-align: left / center / right ;

---------单行垂直调整

line-height: 0 – 99999px;

文本每行高度 设父元素高度 =居中 >下方 <上

无单位高度作用于行之间

---------文本首行边距

text-indent: -99999 – +99999px / em / rem;

---------文字行装饰线

text-decoration: none / underline / overlibe / line-through; 

无 下 上 中

---------控制文本中字母

text-transform: none / capitalize / uppercase / lowercase; 

默认  大写字母开头  全部大写字母  全部小写字母

---------字符间距

letter-spacing: -99999 – +99999px;

---------词间距

word-spacing: -99999 – +99999px;

---------文本图片对齐

vertical-align: top / middle / bottom; 行高度为准(至少2个元素)

vertical-align: text-top / text-bottom; 文字高度为准(至少2个元素)

---------溢出内容隐藏

overflow:hidden/ auto; 隐藏 自动有滚动条

---------文本换行设置

white-space: normal / nowrap; 默认/文本不换行

---------文本强制换行

word-break: normal / break-all; 默认/允许换行

---------文本超出处理

text-overflow: clip / ellipsis; 修剪文本/超出文本…代替

---------单词强制截断

word-wrap: normal / break-word; 默认/单词可截断

---------文字方向

direction: rtl / ltr; 屏幕位置

unicode-bidi: bidi-override; 文字顺序

---------多行文本省略

display: -webkit-box; 兼容显示

-webkit-box-orient: vertical; 符号代替

-webkit-line-clamp: 5; 显示行数

---------用户可否选中

user-select: none/ text / all / element;

不能选中 默认 选择部分 边界范围内