文本字体属性汇总

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内外阴影 ) 
     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;

    }