HTML/CSS/CSS Attributes and Javascript Style Properties/white space
Содержание
- 1 The white-space Property
- 2 "white-space" Example
- 3 white-space: normal
- 4 white-space: normal
- 5 white-space: pre
- 6 white-space: nowrap
- 7 white-space: pre
- 8 white-space: normal
- 9 white-space: pre
- 10 white-space: nowrap
- 11 white-space: pre
- 12 white-space: normal
- 13 white-space: pre
- 14 white-space: nowrap
- 15 white-space: pre
The white-space Property
<source lang="html4strict">
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 theelement 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
element, otherwise text does not wrap. </source>"white-space" Example
<source lang="html4strict"><html> <body>
Line1.
This sentence has line 1 line 2 and
line 3
This is a regular block of text.
<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>
</source>
white-space: normal
<source lang="html4strict"><!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>
white-space: normal
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.
white-space: pre
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.
white-space: nowrap
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.
white-space: pre
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.
</body> </html>
</source>
white-space: nowrap
<source lang="html4strict"><!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>
white-space: normal
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.
white-space: pre
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.
white-space: nowrap
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.
white-space: pre
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.
</body> </html>
</source>
white-space: pre
<source lang="html4strict"><!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>
white-space: normal
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.
white-space: pre
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.
white-space: nowrap
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.
white-space: pre
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.
</body> </html>
</source>