CSS 文字间距


文字缩进

text-indent 属性用于指定文本第一行的缩进:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. p {
  6. text-indent: 50px;
  7. }
  8. </style>
  9. </head>
  10. <body>
  11. <p>在我年幼脆弱的时候,父亲给了我一些建议,从那时起我就一直在想这些建议,他说“每当你想批评别人的时候,只要记住,这个世界上所有的人都没有你所拥有的优势。”</p>
  12. </body>
  13. </html>

字母间距

letter-spacing 属性用于指定文本中字符之间的间距。

下面的代码演示如何增加或减少字符之间的间距:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. h1 {
  6. letter-spacing: 3px;
  7. }
  8. h2 {
  9. letter-spacing: -3px;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <h1>这是标题 1</h1>
  15. <h2>这是标题 2</h2>
  16. </body>
  17. </html>

行高

line-height 属性用于指定行之间的间距:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. p.small {
  6. line-height: 0.7;
  7. }
  8. p.big {
  9. line-height: 1.8;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <p>
  15. 这是有标准行高的段落<br>
  16. 大多数浏览器中的默认行高大概是 110% 到 120%。<br>
  17. </p>
  18. <p class="small">
  19. 这是行高更小的段落。<br>
  20. 这是行高更小的段落。<br>
  21. </p>
  22. <p class="big">
  23. 这是行高更大的段落。<br>
  24. 这是行高更大的段落。<br>
  25. </p>
  26. </body>
  27. </html>

字间距

word-spacing 属性用于指定文本中单词之间的间距。

下面代码演示如何增加或减少单词之间的间距:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. h1 {
  6. word-spacing: 10px;
  7. }
  8. h2 {
  9. word-spacing: -5px;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <h1>这是标题 1</h1>
  15. <h2>这是标题 2</h2>
  16. </body>
  17. </html>

空白

white-space 属性指定元素内部空白的处理方式。

下面代码演示如何禁用元素内的文本换行:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. p {
  6. white-space: nowrap;
  7. }
  8. </style>
  9. </head>
  10. <body>
  11. <h2>空白</h2>
  12. <p>
  13. 这是一些文本。
  14. 这是一些文本。这是一些文本。
  15. 这是一些文本。这是一些文本。这是一些文本。
  16. </p>
  17. <p>请尝试删除 white-space 属性来看一下区别。</p>
  18. </body>
  19. </html>

分类导航