HTML/CSS/Text/white space

Материал из Web эксперт
Перейти к: навигация, поиск

white-space: normal

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
            p {
                font-family: monospace;
                white-space: normal;
            }
        </style>
    </head>
    <body>
        <p>
This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. 
This is a test. This is a test. This is a test. This is a test. 
        </p>
    </body>
</html>



white-space: nowrap

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title></title>
    <style type="text/css">
      p {
        font-family: monospace;
        white-space: nowrap;
      }
    </style>
  </head>
  <body>
    <p>
This is a test. 
     This is a test. 
          This is a test. 
               This is a test. 
    </p>
  </body>
</html>



white-space: nowrap, white-space: pre

 
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <title>CSS Example</title>
  <style rel="stylesheet" type="text/css">
body {
  color: #000000;
  background-color: #ffffff;
  font-family: arial, verdana, sans-serif;
  font-size: 12px;
}
.pre {
  white-space: pre;
}
.nowrap {
  white-space: nowrap;
}
</style>
</head>
<body>
<h1>white-space</h1>
<p class="normal">this is a test. this is a test. .</p>
<p class="pre">this is a test. this is a test. </p>
<p class="nowrap">CSS.</p>
</body>
</html>



white-space: pre

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
            p {
                font-family: monospace;
                white-space: pre;
            }
        </style>
    </head>
    <body>
        <p>
This 
   is 
      a 
         test. This is a test. 
        </p>
    </body>
</html>