【iview】学完font,顺便学下text,再继续学其他组件吧

2020-09-26  本文已影响0人  前端菜篮子

A. text-align:水平对齐方式

p {
    text-align: justify;
    text-align-last: right; /*只有IE有效,*/
    -moz-text-align-last: right; /* 针对 Firefox 的代码 */
}

B. text-indent : 首行缩进

C. 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; /*不换行*/
}

K. line-height & vertical-align

[翻译]关于Vertical-Align你需要知道的事情1

[翻译]关于Vertical-Align你需要知道的事情2

CSS行高——line-height

深入理解line-height

上一篇下一篇

猜你喜欢

热点阅读