Question

浏览器正在将单词之间的多个空格替换为html页面中的单个空格。例如，如果我的文字在浏览器中为'AB-DC 3'，则会显示'AB-DC 3'。检查窗口显示2个空格'AB-DC 3'。

你也可以试试自己。只需检查元素并在任何行检查的单词中添加多个空格。

有没有解决方案？ Similar question回答原因，但没有解释如何解决这个问题。

Answer 1

默认情况下，空格是非重要的，并且在渲染时会缩小为单个空格。

CSS可以改变：white-space: pre-wrap将提供您期望的默认换行功能，以及预格式化文本的重要空白行为。两全其美！

Answer 2

   <pre>AB          BA</pre>

pre标记也可以解决您的问题

Answer 3

关于操作方案：
使用white-space:pre;（除<br>之外没有换行）或white-space:pre-wrap;（需要时换行）。

示例：

＆＃13;

body{
  margin: 0;  
}

div {
  width: 200px;
  height: 100px;
}

#a {
  white-space:pre;
  background: gold;
}

#b {
  white-space:pre-wrap;
  background: skyblue;
}

＆＃13;

<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>

＆＃13;

单一空格：
有时您需要使用单个空格，例如在句子的开头（忽略它时）。在这种情况下，最好的选择是使用 代替。

示例：的

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

避免改变您的显示风格。最好使用风格：

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

Answer 5

如果你在html中给出这么多的空格是没有用的，因为浏览器只考虑你必须使用空格实体 的否。你键入这个实体浏览器的时间将是多少空格

<强> HTML：

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

它将在作品中显示确切的4个空格

这是小提琴链接https://jsfiddle.net/yudi/zrqrfw98/

如何阻止浏览器用单个空格替换多个空间？

5 个答案: