Whitespace collapse in HTML refers to the behaviour where multiple consecutive whitespace characters (spaces, tabs, or line breaks) in the HTML source code are treated as a single space in the rendered output. This is a common feature in HTML where extra whitespace is collapsed into a single space, which helps maintain a consistent appearance on the web page regardless of how much whitespace is present in the source code.
white-space-collapse.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Whitespace Collapse Example</title> </head> <body> <p>This is a paragraph with multiple spaces.</p> <p> This is a paragraph with line breaks and spaces. </p> </body> </html>
Above snippet generate below page.
How to preserve white spaces?
If you use the <pre> tag, whitespace is preserved as-is.
preserve-white-spaces.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Whitespace Collapse Example</title> </head> <body> <pre>This is a paragraph with multiple spaces. This is a paragraph with line breaks and spaces. </pre> </body> </html>
Above snippet generate below screen.
Previous Next Home
No comments:
Post a Comment