Question

我试图在html页面上显示这样的字符串

select
`orders`.id,
DATE_FORMAT(`orders`.`createdAt`, '%d-%m-%Y') AS date_formatted,
count(`orders`.id)
from
`order_status` left JOIN `orders` AS `orders` ON `order_status`.id = `orders`.`orderStatus`  
where
  `orders`.`createdAt` >= '2017-05-05 00:00:00' AND
   `orders`.`createdAt` <= '2017-05-05 11:59:59'
group by
    1,2;

当我将数据从ajax传递给html时，它将其显示为“Hello.Hello” 即使我通过以下方式传递它：

"Hello.    Hello"

在html中我有以下定义的div

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

Answer 1

在CSS中提供您想要的目的地，在本例中为index，#tag。这将解决它（请参阅代码段）

white-space: pre;

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

#tag {
    white-space: pre;
}

Answer 2

使用pre元素

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

Answer 3

HTML会自动删除空格，您可以使用 而不是空格来阻止这种情况。阅读关于非中断空间here的更多信息。

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

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

如果您想在不自行更换空间的情况下使用此功能，您还可以使用RegExp为您执行此操作：

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

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

如果单词之间有多个空格，Html会删除字符串中的空格

3 个答案: