用 html 文档中的“易碎”nbsp 替换空格

Posted 2023-03-05

【中文标题】用 html 文档中的“易碎”nbsp 替换空格

【英文标题】：replace spaces with "breakable" nbsp in html document

【发布时间】：2021-03-13 08:50:22

【问题描述】：

我有一个应用程序，用户可以在其中编辑模板类型（文本区域）。生成的文本稍后会显示为 html，并且还会从中生成 pdf。

目前多个连续的空格显示为一个空格（这是html）。

我得改一下，pdf和html中必须显示多个空格。

我的第一个想法是使用空白预包装。

但不幸的是，有一个复杂的处理涉及 xslts 和其他我现在无法更改的可怕事情，这会阻止多个空间“生存”。

我的第二个想法是用不间断的空间实体 (nbsp) 替换空格。

但不幸的是，这会导致长行根本没有中断（浏览器中显示的滑动条，pdf 中的行溢出边距）。

我想用 <span> </span> 替换空格，但这会使 html 很长（如果没有更好的解决方案，我可能会这样做）。

所以我的问题是：是否有一个“易碎”的空间实体保存在 html 中？

【参考方案1】：

用“nbsp”和“零宽度空间”对替换空格似乎可以解决我的问题。

body font-size: 64px;

<div>Here comes 5 spaces     . Html merges consecutive spaces, understood.</div>
<div>Here comes 5 'nbsp':&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;. Not merged, fine.</div>
<div>Here comes 100 'nbsp':&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;. They are not merged but they are also not breakable, which is not good in my case.</div>
<div>Here comes 100 'nbsp' plus 'zero width space':&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;&nbsp;&#x200B;. They are not merged and they are breakable.</div>