CSS样式-文本

作者: baiying | 来源:发表于2016-12-13 21:07 被阅读32次

    缩进文本

    text-indent
    例:p {text-indent:5em}

    • 注:text-indent可应用于所有块级元素,但不能应用于行内元素。关于行内元素和块级元素请戳进去块级元素&行内元素,此属性也可以继承。

    水平对齐

    text-align

    • left:左对齐
    • right:右对齐
    • center:居中(元素内的文本)
    • <center>:居中(整个元素居中)
    • justify:两端对齐文本,文本行的左右两端都放在父元素的内边界上通过调整单词和字母间的间隔,使各行的长度恰好相等。

    举例如下:

    <html>
      
      <head>
        <style type="text/css">.spread {text-align:left} .tight {text-align:justify} .text{ background:green; width:80px; }</style></head>
      
      <body>
        <div class="text">
          <p class="spread">This is some text. This is some text.</p>
          <br>
          <p class="tight">This is some text. This is some text.</p></div>
      </body>
    
    </html>
    
    运行结果

    字间隔

    word-spacing

    • 设置正值增大字间距,设置负值减小字间距
      p{word-spacing:20px}

    字母间隔

    letter-spacing

    • 注:理解字间隔&字母间隔,用法与字间隔相同。

    文本装饰

    text-decoration

    • none
    • underline:下划线
    • overline:顶部一条线
    • line-through:一条贯穿线
    • blink:文本闪烁

    字符转换

    text-transform

    • none
    • uppercase:转大写
    • lowercase转小写
    • capitalize:每个单词首字母大写

    处理空白符

    white-space

    具体如下:

    white-space各值对应的处理

    文本方向

    direction

    • ltr(默认):从左到右
    • rtl:从右到左

    相关文章

      网友评论

        本文标题:CSS样式-文本

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