css文本各种属性集合

1. 字体属性

font-family：‘微软雅黑’ 指定字体Css属性设置样式

font-size: 12px/em/rem

font-weight:normal;

font-style:设置字体倾斜，可能的属性有normal、italic、oblique;

line-height:设置字体的行间距;

color:red 字体颜色

2. 文本属性

text-align:控制文本的对齐方式

text-indent :控制文本首行的缩进，px或%都可；

white-space:文档中的空白处

属性值:noraml: 默认忽略多个空格,只输出一个空格 .

nowrap: 强制不换行

pre:空格/缩进/换行 会给保留

pre-line:合并空表(多个空格只会输出一个空格)

pre-warp:保留空白/缩进,正常换行 ;

letter-spacing:控制字母之间的距离；

text-overflow:当文本溢出包含元素时发生的事情；

属性值: clip 修剪文本。

ellipsis 显示省略符号来代表被修剪的文本。

string 使用给定的字符串来代表被修剪的文本。

word-spacing :控制单词间空格的距离，以空格来区分单词，中英都OK；

3. 下划线属性

text-decoration :控制文本是否有下划线，可能值有

none 没有下划线

overline 定义文本上的一条线。

line-through 定义穿过文本下的一条线。

underline 定义文本下的一条线。

4. 转换大小写:

text-transform:

属性值: none(默认) 无转换;

capitalize:每个单词第一个字母为大写;

upercase :转换成大写;

lowercase:转换成小写;

5. 边框属性

border-radius :60px 30px 40px 50px /左上 右上 右下 右左 /50%为圆

6. 盒子阴影

box-shadow:盒子阴影;

//可以有五个值 (h-shadow水平阴影位置,v-shadow垂直阴影位置,blur模糊距离,spread阴影尺寸, color， inset/outset内外阴影 )

eg:box-shadow: 10px 5px 10px red inset;

7. 文本超出换行

Word-warp:允许长单词转换到下一行

Word-break:允许在单词内转行(自动换行)

8. 文字摆放形式

direction: 文字摆放方向

属性值 ltl:从左往右

rtl:从右往左

9. 文本超出换行

Word-warp:允许长单词转换到下一行

Word-break:允许在单词内转行(自动换行) ..

10. 文字阴影:

text-shadow:参考盒子阴影

11. 文本单行超出显示省略号

{

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

}

12. 多行文本超出用省略号代替限制行数

{

overflow:hidden;

word-break: break-all;

display: -webkit-box;

-webkit-line-clamp: 3; /*限制在一个块元素显示的文本的行数*/

-webkit-box-orient: vertical;

text-overflow:ellipsis;

}