FastHTML中如何插入HTML字符实体以正确显示连续空格？

嘿，我完全懂你碰到的问题——FastHTML默认会自动对文本内容做HTML转义，所以你直接写的 和 都会被转成 和 ，浏览器自然就把它们当成普通字符串显示，而不是解析成空格了。

给你几个实用的解决办法，按需选择就行：

方法1：用Raw组件跳过转义 #

FastHTML提供了Raw组件，它会直接把内容当作原始HTML渲染，不会做转义处理。把包含实体的字符串用fh.Raw包起来就可以：

from fasthtml import common as fh
app = fh.FastHTML()

@app.get('/mytest')
def home():
    return fh.Div(
        fh.H1("FastHTML APP"),
        # 把带实体的文本用Raw包裹，避免转义
        fh.P(fh.Raw("My separated        string")),
    )
fh.serve()

⚠️ 注意：如果你的内容来自用户输入，用Raw要警惕XSS风险哦。

方法2：直接使用Unicode非断空格字符 #

非断空格的Unicode编码是\u00A0，FastHTML不会转义Unicode字符，直接用这个字符代替实体就行：

from fasthtml import common as fh
app = fh.FastHTML()

@app.get('/mytest')
def home():
    # 用6个Unicode非断空格实现连续空白
    spaced_text = "My separated " + "\u00A0"*6 + " string"
    return fh.Div(
        fh.H1("FastHTML APP"),
        fh.P(spaced_text),
    )
fh.serve()

这种方式简单直接，也不用担心转义问题。

方法3：用CSS保留普通空格 #

如果只是想保留连续的普通空格，不需要用实体的话，给段落加上white-space样式就行，比如pre-wrap（保留空格同时支持自动换行）：

from fasthtml import common as fh
app = fh.FastHTML()

@app.get('/mytest')
def home():
    return fh.Div(
        fh.H1("FastHTML APP"),
        # 通过CSS设置保留空格
        fh.P("My separated      string", style="white-space: pre-wrap"),
    )
fh.serve()

这种方式适合需要保留文本原有空格格式的场景，比如代码片段或者排版要求高的文本块。

备注：内容来源于stack exchange，提问作者Ximo Dante