今天小编跟大家讲解下有关css 文本属性有哪些? ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关css 文本属性有哪些? 的相关资料,希望小伙伴们看了有所帮助。
1、字体属性
font-family:‘微软雅黑’ 指定字体css属性设置样式
font-size: 12px/em/rem
font-weight:normal;
font-style:设置字体倾斜,可能的属性有normal、italic、oblique;
line-height:设置字体的行间距;
color 字体颜色
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;}来源:爱蒂网