css设置换行规则

61次阅读
没有评论

CSS提供了white-space属性来设置元素中的文本的处理方式,包括换行规则。其中,white-space属性有以下可选值:

  • normal:默认值,表示按照正常的换行规则处理文本。
  • nowrap:表示文本不进行换行。
  • pre:表示保留空格和换行符,文本中的空格和换行符将被保留,而不是被合并或忽略。
  • pre-wrap:表示保留空格和换行符,并允许文本自动换行。
  • pre-line:表示保留空格,但是将忽略换行符,文本中的换行符将被忽略,而文本将根据容器的宽度进行自动换行。

下面是一个示例,展示如何使用white-space属性来设置换行规则:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Word Wrapping Example</title>
  <style>
    .container {
      width: 200px;
      height: 100px;
      border: 1px solid black;
    }
    
    .normal {
      white-space: normal;
    }
    
    .nowrap {
      white-space: nowrap;
    }
    
    .pre {
      white-space: pre;
    }
    
    .pre-wrap {
      white-space: pre-wrap;
    }
    
    .pre-line {
      white-space: pre-line;
    }
  </style>
</head>
<body>
  <h2>Word Wrapping Example</h2>
  <div class="container normal">
    This is a normal text. It will wrap according to the container's width.
  </div>
  <div class="container nowrap">
    This is a text that will not wrap even if it exceeds the container's width.
  </div>
  <div class="container pre">
    This is a preformatted text.   It will preserve all spaces and line breaks.
  </div>
  <div class="container pre-wrap">
    This is a preformatted text. It will preserve all spaces and line breaks, and wrap according to the container's width.
  </div>
  <div class="container pre-line">
    This is a preformatted text. It will preserve all spaces, but ignore line breaks and wrap according to the container's width.
  </div>
</body>
</html>

在这个示例中,我们创建了一个包含5个不同文本的容器,并设置了不同的white-space属性值。这样,我们可以看到每个容器中的文本如何在不同的换行规则下被处理。

正文完
 
评论(没有评论)