如果单词之间有多个空格，HTML会在字符串中剥离空格

Question

I am trying to display a string like this on the html page

"Hello.    Hello"

When i pass the data from ajax to html, its displaying it as "Hello. Hello" even though i pass it in the following way:

$("#tag").text("Hello.     Hello");

In html i have the div as defined below

<div id="tag"></div>

Answer 1

Give your desired destination, in this case #tag , white-space: pre; in CSS. This will fix it (See snippet)

 $("#tag").text("Hello. Hello"); 

 #tag { white-space: pre; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id = "tag"></div> 

Answer 2

使用pre元素

$("#tag").append("<pre>Hello.     Hello</pre>");

Answer 3

HTML automatically removes whitespace, you can prevent this by using   instead of a space. Read more on the non-breaking space here .

 var html = "Hello.          World."; $("#tag").html(html); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="tag"></div> 

If you want this to work without replacing the spaces yourself, you can also use a RegExp to do this for you:

 var html = "Hello. World."; let re = / /g; $("#tag").html(html.replace(re, " ")); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="tag"></div>