16

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'. Inspect window its showing 2 spaces 'AB-DC 3'.

you can also try out yourself. just inspect element and add multiple spaces in word of any line check.

is there any solution for this?? Similar question answered cause, but not explaining how to resolve this.

Community
  • 1
  • 1
Avinash patil
  • 1,689
  • 4
  • 17
  • 39

5 Answers5

21

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!

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
8
   <pre>AB          BA</pre>

pre tag will also solve your problem

Gibbs
  • 21,904
  • 13
  • 74
  • 138
6

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 &nbsp; 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>
L777
  • 7,719
  • 3
  • 38
  • 63
3

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

<style>
    { white-space: pre;}
</style>
GGO
  • 2,678
  • 4
  • 20
  • 42
Batty
  • 121
  • 1
  • 5
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 &nbsp; 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/

AndrewL64
  • 15,794
  • 8
  • 47
  • 79
Gaurav Aggarwal
  • 9,809
  • 6
  • 36
  • 74
  • 3
    ` ` is not the same thing as a space. You will lose the ability to wrap text on multiple lines because it is, as its name suggests, non-breaking space. – Niet the Dark Absol Mar 28 '16 at 09:58