用

Answer 1

demo. CSS3相关：

Answer 2

任何人都可以解释为什么在多行 /单行显示中存在这样的错误：inline-block; （请参阅上面的小提琴链接，并检查...） Consider：

white-space: pre-wrap; 空间字符是由text-space-collapse

创建的线框容器。

CSS2.116.6.1描述了必须如何处理线路中的空间：

在一条线结束时，每行都被布置了……[i] f一个空间（u+0020）的“白空间”设置为“正常”，“ nowrap”或“ pre-line”，它被…删除。

Answer 3

在线

内联块，将其删除。 Contrast：

​<p><span style="display:inline-block">lorem </span>​​​​​​​​​​​​​​​​​​<span>ipsum</span></p>

在这种情况下，没有删除空间，因为它是一个组成单行框的两个内联级元素之间。

您可以使用

display:inline-block元素使空间可见。可以说，如果您想在视觉上显示ASCII艺术，则是一个快速的解决方案。

我在某些WordPress博客中使用的代码。 仅过滤主要内容并照顾法式“标点前空间”，以用非破坏角色替换它们（“” Isocode是“ \ u00a0”）：

<p><span style="display:inline-block">lorem</span> <span>ipsum</span></p>​