CSS样式-文本

2016-12-13 本文已影响32人 baiying

缩进文本

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：从右到左