文本字体属性汇总

最新推荐文章于 2024-04-22 13:50:02 发布

weixin_34406086

最新推荐文章于 2024-04-22 13:50:02 发布

阅读量638

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/u/3692906/blog/3060075

本文详细介绍了CSS中字体、文本、下划线及大小写转换等属性，包括font-family、font-size、text-align、text-indent等，并解析了边框、盒子阴影、文本换行与文字阴影等高级样式技巧。

2019独角兽企业重金招聘Python工程师标准>>>

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:转换成小写;

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

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

文本超出换行 Word-warp:允许长单词转换到下一行 Word-break:允许在单词内转行(自动换行)
文字摆放形式 direction: 文字摆放方向属性值 ltl:从左往右 rtl:从右往左
文本超出换行 Word-warp:允许长单词转换到下一行 Word-break:允许在单词内转行(自动换行)
文字阴影: text-shadow:参考盒子阴影
文本单行超出显示省略号 { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
多行文本超出用省略号代替限制行数
{ overflow:hidden; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 3; /限制在一个块元素显示的文本的行数/ -webkit-box-orient: vertical; text-overflow:ellipsis;

}