CSS white-space属性-之路教程

CSS white-space属性值说明

值	描述
normal	在必要时破坏线条填充线盒。这是此属性的默认值。
nowrap	使用此值，文本永远不会包装到下一行。
pre	允许在文本的第一个字母之前在线上有另外的空格。
pre-line	空白序列崩溃成一个空格。文字将在必要时软件包，并在线中断。
pre-wrap	空格由浏览器保留。文字将在必要时软件包，并在线中断。
break-space	与“pre-wrap”相同的行为除外：<br> 任何保留的空白序列总是占用空间，包括在行的末尾。<br>在每个保留的空白字符之后，包括空白字符之间，都存在换行机会<br>这种保留的空间占用空间，不悬挂，从而影响盒子的内在尺寸
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

语法

white-space: normal | nowrap | pre | pre-line | pre-wrap | break-space | initial | inherit;

具有“normal”值的white-space属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      div {
        white-space: normal;
      }
    </style>
  </head>
  <body>
    <h2>White-space 属性示例</h2>
    <div>
      生活终归还得继续。.生活终归还得继续。. 生活终归还得继续。. 生活终归还得继续。. 生活终归还得继续。. 生活终归还得继续。. 生活终归还得继续。. 生活终归还得继续。.
    </div>
  </body>
</html>

在此示例中，文本不会换行到下一行。

具有“nowrap”值的空白属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      div {
        white-space: nowrap;
      }
    </style>
  </head>
  <body>
    <h2>White-space 属性示例</h2>
    <div>
      生活终归还得继续。.生活终归还得继续。. 生活终归还得继续。. 生活终归还得继续。. 生活终归还得继续。. 生活终归还得继续。. 生活终归还得继续。. 生活终归还得继续。.
    </div>
  </body>
</html>

具有“pre-line”值的white-space属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      div {
        white-space: pre-line;
      }
    </style>
  </head>
  <body>
    <h2>White-space 属性示例</h2>
    <div>
      生活终归还得继续。.生活终归还得继续。. 生活终归还得继续。. 生活终归还得继续。.生活终归还得继续。. 生活终归还得继续。. 生活终归还得继续。. 生活终归还得继续。.
    </div>
  </body>
</html>

在下一个示例中，我们可以看到“nowrap”、“normal”和“pre-wrap”值之间的区别。

具有三个值的white-space属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      p.t1 {
        white-space: nowrap;
      }
      p.t2 {
        white-space: normal;
      }
      p.t3 {
        white-space: pre-wrap;
      }
    </style>
  </head>
  <body>
    <h2>White-space 属性示例</h2>
    <h3>white-space: nowrap;</h3>
    <p class="t1">
      生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
 生活终归还得继续。. 生活终归还得继续。.
    </p>
    <h3>white-space: normal;</h3>
    <p class="t2">
      生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
生活终归还得继续。. 生活终归还得继续。.
    </p>
    <h3>white-space: pre-line;</h3>
    <p class="t3">
     生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
 生活终归还得继续。. 生活终归还得继续。.
    </p>
  </body>
</html>

CSS white-space属性

white-space 属性指定如何处理元素内的空白。
空白可以是一系列空格或者换行符。

此属性可以应用于元素内的任何内联内容。

另外指定的空格合并为一个，删除换行符，并在必要时将行打断并换行以适应其容器。

初始值	normal
应用于	内联级别和表格单元元素，也适用于伪元素::first-letter 和 ::first-line。
继承	无效
可动画的	是的。垂直对齐是可动画的。
版本	CSS1.
DOM 语法	object.Style.WhiteSpace = "nowrap";

日期：2020-06-02 22:14:52 来源：oir作者：oir

←CSS :visited 伪类

CSS widows属性→

CSS white-space属性值说明

语法

具有“normal”值的white-space属性示例：

具有“nowrap”值的空白属性示例：

具有“pre-line”值的white-space属性示例：

具有三个值的white-space属性示例：

目录