How to stop Browser from replacing multiple space by single space?

Question

Browser is replacing Multiple space between words to the single space in html page. for e.g if my text is \'AB-DC 3\' in Browser its showing \'AB-DC 3\'<

Answer 1

On the Op scenario:
Use white-space:pre; (no wrap except at <br>) or white-space:pre-wrap; (wrap when needed).

Example:

body{
  margin: 0;  
}

div {
  width: 200px;
  height: 100px;
}

#a {
  white-space:pre;
  background: gold;
}

#b {
  white-space:pre-wrap;
  background: skyblue;
}

<div id=a>This  is   some Text  writen  on here as   example.<br> Here's    a  second  sentence after the line-break .</div>
<div id=b>This  is   some Text  writen  on here as   example.<br> Here's    a  second  sentence after the line-break .</div>

Single White spaces:
Sometimes you need to use single spaces, like at the start of a sentence (when it is ignored). In situations like this, the best choice is to use   instead.

Example:

p:nth-of-type(1) {
  font-size: 2em;
  background: tomato;  
}

p:nth-of-type(2) {
  font-size: 2em;
  background: greenyellow;  
}

<p> content</p>
<p>&nbsp;content</p>

Answer 2

If you give so many spaces in html it is of no use because browser will consider only one you have to use space entity   the no. of times you type this entity browser will so that much spaces

HTML:

<p>He&nbsp;&nbsp;&nbsp;&nbsp;llo</p>

It will show exact 4 spaces in the work

Here is the fiddle link https://jsfiddle.net/yudi/zrqrfw98/

Answer 3

To avoid changing your style of display. Better to use style:

<style>
    { white-space: pre;}
</style>

Answer 4

   <pre>AB          BA</pre>

pre tag will also solve your problem

Answer 5

Whitespace is non-significant by default, and is compacted down to a single space when rendered.

CSS can change that: white-space: pre-wrap will provide the default line-wrapping functionality that you would expect, plus the significant-whitespace behaviour of preformatted text. Best of both worlds!