【iview】学完font,顺便学下text,再继续学其他组件吧
2020-09-26 本文已影响0人
前端菜篮子
A. text-align:水平对齐方式
- 属性值:
left
/right
/center
/justify
(两端对齐) CSS direction
属性简介与实际应用-
text-align-last
:段落最后一行对齐方式
p {
text-align: justify;
text-align-last: right; /*只有IE有效,*/
-moz-text-align-last: right; /* 针对 Firefox 的代码 */
}
-
text-justify
:改变字与字之间的间距使得每行对齐(是否就ie支持?具体属性值,自行了解) -
vertical-align
:设置一个元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。这个在后面和line-height
一起再做个介绍;这个属性其实和text-align
没啥关系吧?
B. text-indent : 首行缩进
- 属性规定文本块中首行文本的缩进。
- 注意: 负值是允许的。如果值是负数,将第一行左缩进。
C. text-decoration
-
text-decoration
属性规定添加到文本的修饰,下划线、上划线、删除线等(上划线、下划线、删除线可以同时存在哦
)。 - text-decoration 属性是以下三种属性的简写:
h1.under {
text-decoration: underline wavy red;
}
h1.over {
text-decoration: overline red;
}
p.line {
text-decoration: line-through;
}
p.blink {
text-decoration: blink;
}
a.none {
text-decoration: none;
}
p.underover {
text-decoration: underline overline;
}
D. text-overflow:修剪文字
E. text-shadow : 基本文字阴影
h1 {
text-shadow: 2px 2px #ff0000;
}
F. text-transform:大小写
h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;}
G. text-wrap:换行,主流浏览器支持否?
自行验证哦!!!
H. text-outline:轮廓,主流浏览器支持否?
自行验证哦!!!
p.test {
text-outline: 2px 2px #ff0000;
}
I. word相关的属性这里顺便也一起学下吧
word-break
:在合适的点换行
word-spacing
:指定段字之间的空间(单词之间的距离)
p {
word-spacing:30px;
}
letter-spacing
:字符间距(字母之间的距离)
h1 {letter-spacing:2px}
h2 {letter-spacing:-3px}
word-wrap
:指定如果足够长得话,应该换行
J. white-space
p {
white-space:nowrap; /*不换行*/
}