如何在 html 标签之间获取空格

Question

使用 Elm 的 Html 模块，输出在 html 标签之间没有任何白色 space。但是对于内联显示的标签，whitespace有一个功能，让浏览器在它们之间显示空space。

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

结果：

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

在浏览器中显示为：Key:value（额外）

想要的结果

想要的html一定要有点白space:

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

在浏览器中显示为：键：值（额外）

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)"
        ]

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)"
        ]

如何在 html 标签之间获取空格

How to get whitespace between html tags

html

elm

想要的结果