文本字体属性汇总

原创
2019/06/10 11:51
阅读数 118

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:转换成小写;
  1. 边框属性 border-radius :60px 30px 40px 50px /左上 右上 右下 右左 /50%为圆

  2. 盒子阴影
      box-shadow:盒子阴影;
      //可以有五个值  (h-shadow水平阴影位置,v-shadow垂直阴影位置,blur模糊距离,spread阴影尺寸, color,                                      inset/outset内外阴影 ) 
      box-shadow: 10px 5px 10px red inset;
    
  3. 文本超出换行 Word-warp:允许长单词转换到下一行 Word-break:允许在单词内转行(自动换行)

  4. 文字摆放形式 direction: 文字摆放方向 属性值 ltl:从左往右 rtl:从右往左

  5. 文本超出换行 Word-warp:允许长单词转换到下一行 Word-break:允许在单词内转行(自动换行)

  6. 文字阴影: text-shadow:参考盒子阴影

  7. 文本单行超出显示省略号 { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

  8. 多行文本超出用省略号代替限制行数
    { overflow:hidden; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 3; /限制在一个块元素显示的文本的行数/ -webkit-box-orient: vertical; text-overflow:ellipsis;

    }

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部