美文网首页
【iview】学完font,顺便学下text,再继续学其他组件吧

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

作者: 前端菜篮子 | 来源:发表于2020-09-26 07:00 被阅读0次

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

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

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

相关文章

网友评论

      本文标题:【iview】学完font,顺便学下text,再继续学其他组件吧

      本文链接:https://www.haomeiwen.com/subject/xuxtuktx.html