如何在HTML标签之间添加空格

Question

使用 Elm 的 Html 模块输出的 HTML 标签之间没有任何空格。但对于内联显示的标签，空格具有功能，并使浏览器在它们之间显示空白。

div []
    [ strong [] [ text "Key:" ]
    , span [] [ text "value" ]
    , text "(extra)"
    ]

转化为：

<div><strong>Key:</strong><span>value</span>(extra)</div>

在浏览器中显示为：键:值(附加内容)

期望的结果

所需的HTML必须有某种空白：

<div>
<strong>Key:</strong>
<span>value</span>
(extra)
</div>

在浏览器中显示为：键: 值 (额外内容)

- Holger Ludvigsen

---

你能不能明确一下空格呢？ - glennsl

可能吧。但那非常不优雅！ - Holger Ludvigsen

这就是实际情况。相反，我发现将垂直空白转换为水平空白的魔法不够优雅，而且过于复杂和容易出错。通常我更喜欢显式，因为它往往会导致更少的意外。当然也有例外，如果某些事情太繁琐和频繁，以至于我可能真的记住了魔法的特殊规则。但在我看来，这似乎不是那种情况，主要是因为这种情况似乎很少发生。但这只是我的个人看法... - glennsl

Answer 1

您可以手动在元素之间添加空格：

div []
    [ strong [] [ text "Key:" ]
    , text " "
    , span [] [ text "value" ]
    , text " "
    , text "(extra)"
    ]

如果您想要更通用的内容，您可以使用 List.intersperse 轻松编写一个函数来实现，例如:

withSpacing : List (Html msg) -> List (Html msg)
withSpacing =
    List.intersperse (text " ")


main : Html msg
main =
    div []
        (withSpacing
            [ strong [] [ text "Key:" ]
            , span [] [ text "value" ]
            , text "(extra)"
            ]
        )

如果更方便的话，可以基于一个合理的假设，即你将把它应用到一个接受子元素列表并产生单个元素的函数中：

withSpacing : (List (Html msg) -> Html msg) -> List (Html msg) -> Html msg
withSpacing element =
    List.intersperse (text " ") >> element


main : Html msg
main =
    withSpacing (div [])
        [ strong [] [ text "Key:" ]
        , span [] [ text "value" ]
        , text "(extra)"
        ]

- glennsl

Answer 2

您可以按照以下方式为Html标签创建包装器：

type alias HtmlTag msg =
   List (Html.Attribute msg) -> List (Html msg) -> Html msg


interspaced : HtmlTag msg -> HtmlTag msg
interspaced fn =
   \attr content -> fn attr (content |> List.intersperse (text " "))


main : Html msg
main =
    interspaced div []
        [ strong [] [ text "Key:" ]
        , span [] [ text "value" ]
        , text "(extra)"
        ]

- Jørgen

---

这里的用法比@glennsl的建议更好，因为你不需要额外的缩进和括号。 - Holger Ludvigsen

看起来确实更好，但它不能适用于大多数用户定义的视图函数，因为它们通常不遵循相同的形状。所以它实际上更加专业化，而不是通用化。/挑剔 - glennsl

可以说我的表述不准确，所以在我们同意更好的表述之后，我会进行更正。但是这个包装器可以在所有Html标签上工作，因此它将在用户定义的视图函数中起作用。你的解决方案也不能在“大多数用户定义的视图函数”中起作用，因为它需要一个List (Html msg)，而“大多数用户定义的视图函数”并不产生这种类型。@glennsl，你有关于措辞的建议吗？ - Jørgen

将 MarkupFunction 重命名为 HtmlTag，并将第一行替换为有关包装 Html 标记以消除歧义的内容？ - Jørgen

你可以将解决方案泛化一些，只需不完全遵循 Html 函数的形状，而是要求最后一个参数是元素列表，按照惯例，我认为大多数用户定义的函数都会这样做，并部分应用带有属性的元素函数。类型将是 withSpacing: (List (Html msg) -> Html msg) -> Html msg，并且可以与标准的 Html 函数一起使用：withSpacing (div []) [ strong ... ]。 - glennsl