美文网首页
【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