Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Do browsers remove whitespace in between text of any html tag

Here is a fiddle demonstrating the problem

http://jsfiddle.net/WM8XW/

I have inserted many whitespace in the content of the label tag but the html rendered seems to remove it. Is adding   only solution to the above problem

HTML Content

<label>label with very          long white space in between</label>
like image 350
Deeptechtons Avatar asked Jul 22 '13 09:07

Deeptechtons


People also ask

Does HTML remove whitespace?

White space is honored exactly as it is in the HTML and the text does not wrap until a line break is present in the code. This is particularly useful when literally displaying code, which benefits aesthetically from some formatting (and sometimes is absolutely crucial, as in white-space-dependent languages!)

What happens to whitespace in HTML?

What does happen to whitespace? They don't just disappear, however. Any whitespace characters that are outside of HTML elements in the original document are represented in the DOM. This is needed internally so that the editor can preserve formatting of documents.

Is whitespace ignored in HTML?

The HTML interpreter ignore white spaces by default. HTML ignore any space added after the first space between words. Any space at the start or end of a HTML tags is completely ignored. HTML interpreters also ignore line breaks by default.

How do I make HTML not ignore whitespace?

So, while the default in HTML is to ignore multiple spaces and line breaks, you can override this using the <pre> tag. (X)HTML also allows the use of the non-breaking space ( &nbsp; ). If you want to string together multiple spaces that you don't want to collapse, you can use the non-breaking space.


2 Answers

The normal behavior for the display of whitespaces is to compress them into a single one, which is then displayed.

There are two exceptions from that:

  1. The <pre> tag, which keeps the whitespaces as entered.
  2. Setting the CSS property white-space: pre; (respectively pre-wrap or pre-line)
like image 113
Sirko Avatar answered Sep 18 '22 15:09

Sirko


Browsers usually treat multiple consecutive spaces and/or carriage returns as a single space. In the case of non-breaking spaces (&nbsp; or &#160;) browsers will typically honor multiple consecutive occurrences as-is with no collapsing to a single space.

Solution1:

You can hard code the (&nbsp; or &#160;) as much as you want.

Reference

Any text between the opening <pre> tag and the closing </pre> tag will preserve the formatting of the source document.

Solution2: You can make use of <pre> tag.

Reference

If you want to execute with css also you can perform the same the above answers are only from html point of view

like image 22
Arun Chandran C Avatar answered Sep 18 '22 15:09

Arun Chandran C