HTML/CSS/CSS Attributes and Javascript Style Properties/white space — различия между версиями

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

Текущая версия на 08:16, 26 мая 2010

The white-space Property

 
The white-space property controls whether or not whitespace is preserved within and between block level elements. 

Value      Meaning
normal     Normal whitespace collapsing rules are followed.
pre        Whitespace is preserved just as in the <pre> element of XHTML, but the formatting is whatever is indicated for that element, not just a monospaced font.
nowrap     Text is broken onto a new line only if explicitly told to with a <br /> element, otherwise text does not wrap.



"white-space" Example

    
<html>
<body>
<div id="myDiv" style="background:beige; width:400px;">
   Line1.<br>
   This sentence has line 1
   line 2
   and <br><br>
   line 3 
   <br>
   This is a regular block of text.
</div>
<br>
<button onclick="myDiv.style.whiteSpace="normal";">Set whiteSpace property to:normal</button>
<button onclick="myDiv.style.whiteSpace="pre";">Set whiteSpace property to: pre</button>
</body>
</html>



white-space: normal

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>The effect of different values of white-space</title>
  <style type="text/css">
    body {
      font: 12px/1.5em Georgia, serif;
    }
    h1 {
      font: bold 12px/1.5em Georgia, serif;
      margin: 0.75em 0 0 0;
    }
    p {
      white-space: normal;
      margin: 0;
    }
  </style>
</head>
<body>
<div>
  <h1>white-space: normal</h1>
  <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. 
  this is a test. this is a test. this is a test. 
  this is a test. </p>
</div>
<div class="pre">
  <h1>white-space: pre</h1>
  <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. 
  this is a test. this is a test. this is a test. 
  this is a test. </p>
</div>
<div class="nowrap">
  <h1>white-space: nowrap</h1>
  <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. 
  this is a test. this is a test. this is a test. 
  this is a test. </p>
</div>
<div class="pre">
  <h1>white-space: pre</h1>
  <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. 
  this is a test. this is a test. this is a test. 
  this is a test. </p>
</div>
</body>
</html>



white-space: nowrap

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>The effect of different values of white-space</title>
  <style type="text/css">
    body {
      font: 12px/1.5em Georgia, serif;
    }
    h1 {
      font: bold 12px/1.5em Georgia, serif;
      margin: 0.75em 0 0 0;
    }
    div.nowrap p {
      white-space: nowrap;
    }
  </style>
</head>
<body>
<div>
  <h1>white-space: normal</h1>
  <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. 
  this is a test. this is a test. this is a test. 
  this is a test. </p>
</div>
<div class="pre">
  <h1>white-space: pre</h1>
  <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. 
  this is a test. this is a test. this is a test. 
  this is a test. </p>
</div>
<div class="nowrap">
  <h1>white-space: nowrap</h1>
  <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. 
  this is a test. this is a test. this is a test. 
  this is a test. </p>
</div>
<div class="pre">
  <h1>white-space: pre</h1>
  <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. 
  this is a test. this is a test. this is a test. 
  this is a test. </p>
</div>
</body>
</html>



white-space: pre

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>The effect of different values of white-space</title>
  <style type="text/css">
    body {
      font: 12px/1.5em Georgia, serif;
    }
    h1 {
      font: bold 12px/1.5em Georgia, serif;
      margin: 0.75em 0 0 0;
    }
    div.pre p {
      white-space: pre;
    }
  </style>
</head>
<body>
<div>
  <h1>white-space: normal</h1>
  <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. 
  this is a test. this is a test. this is a test. 
  this is a test. </p>
</div>
<div class="pre">
  <h1>white-space: pre</h1>
  <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. 
  this is a test. this is a test. this is a test. 
  this is a test. </p>
</div>
<div class="nowrap">
  <h1>white-space: nowrap</h1>
  <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. 
  this is a test. this is a test. this is a test. 
  this is a test. </p>
</div>
<div class="pre">
  <h1>white-space: pre</h1>
  <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. 
  this is a test. this is a test. this is a test. 
  this is a test. </p>
</div>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/CSS_Attributes_and_Javascript_Style_Properties/white_space&oldid=4957»