图解CSS3 -空白空白符处理

顺晟科技

2022-09-13 14:11:22

142

CSS3-white-space空白符处理

一、效果代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title>white space空白符处理</title>
   <style type="text/css">
   	   .head{
   	   	  margin: 0 0 0 100px;
   	   }
   	   .container{
   	   	 margin: 0 0 0 100px;
   	   }
       .container div{
        width: 300px;
        height: 100px;
        margin: 0 0 20px 0;
        border: 1px solid red;
       }
       .d1{
          white-space: normal;
       }
       .d2{
        white-space: pre;

       }
       .d3{
        white-space: nowrap;

       }
       .d4{
        white-space: pre-line;

       }
       .d5{
        white-space: pre-wrap;

       }
       .d6{
        white-space: inherit;

       }
   </style>
</head>
<body>
    <div class="head">
    	<h1>white space 空白符处理</h1>
    	<h2>首页<a href="index.html"></a></h2>
    </div>
    <div class="container">
           <h2>white-space: normal;</h2>
    	    <div class = \'d1\'>
          Sunlike阿理旺旺    Sunlike阿理旺旺Sunlike阿理旺旺
          Sunlike阿理旺旺 Sunlike阿理旺旺 Sunlike阿理旺旺  
          Sunlike阿理旺旺     Sunlike阿理旺旺Sunlike阿理旺旺
          </div>
            <h2> white-space: pre;</h2>
          <div class = \'d2\'>
          Sunlike阿理旺旺    Sunlike阿理旺旺Sunlike阿理旺旺
          Sunlike阿理旺旺 Sunlike阿理旺旺 Sunlike阿理旺旺  
          Sunlike阿理旺旺     Sunlike阿理旺旺Sunlike阿理旺旺
          </div>
            <h2>white-space: nowrap;</h2>
          <div class = \'d3\'>
          Sunlike阿理旺旺    Sunlike阿理旺旺Sunlike阿理旺旺
          Sunlike阿理旺旺 Sunlike阿理旺旺 Sunlike阿理旺旺  
          Sunlike阿理旺旺     Sunlike阿理旺旺Sunlike阿理旺旺
          </div>
            <h2>white-space: pre-line;</h2>
          <div class = \'d4\'>
          Sunlike阿理旺旺    Sunlike阿理旺旺Sunlike阿理旺旺
          Sunlike阿理旺旺 Sunlike阿理旺旺 Sunlike阿理旺旺  
          Sunlike阿理旺旺     Sunlike阿理旺旺Sunlike阿理旺旺
          </div>
            <h2> white-space: pre-wrap;</h2>
          <div class = \'d5\'>
          Sunlike阿理旺旺    Sunlike阿理旺旺Sunlike阿理旺旺
          Sunlike阿理旺旺 Sunlike阿理旺旺 Sunlike阿理旺旺  
          Sunlike阿理旺旺     Sunlike阿理旺旺Sunlike阿理旺旺
          </div>
            <h2>white-space: inherit;</h2>
          <div class = \'d6\'>
          Sunlike阿理旺旺    Sunlike阿理旺旺Sunlike阿理旺旺
          Sunlike阿理旺旺 Sunlike阿理旺旺 Sunlike阿理旺旺  
          Sunlike阿理旺旺     Sunlike阿理旺旺Sunlike阿理旺旺
          </div>
    </div>
</body>
</html>

　　效果1：