CSS样式-文本

缩进文本

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:从右到左
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,080评论 1 4
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,110评论 0 1
  • CSS格式化排版 1、字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例...
    张文靖同学阅读 1,332评论 0 3
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 1,003评论 0 1
  • 掌柜!一壶桂花香,半斤牛肉切成臊子,洒家且听你一段楼台戏!” “客官这是往哪儿去?”来者是一位五大三粗的...
    多多掌柜阅读 292评论 0 2