如何获取html标记之间的空白

使用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>

键：
价值
（额外）

---

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

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

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

或者，如果您想要更通用的东西，您可以使用

列表轻松编写一个函数来实现。穿插
，例如：

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

您可以为
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)"
        ]

你能不能不直截了当地说出空格？嗯，也许吧。但这是非常不公平的！这就是事实。相反，我发现垂直空格神奇地变成了水平空格，这既不雅观，也过于复杂和容易出错。我通常更喜欢明确，因为它往往导致更少的惊喜。不过也有例外，如果某件事情非常乏味和频繁，以至于我可能会真正记住魔法的特殊规则。但在我看来，这不像是那种情况，主要是因为这种情况似乎很少发生。但这只是我的两分钱……这里的用法看起来比@glennsl的建议要好，因为你没有额外的缩进，而且paranthesisIt确实看起来更好，但它不适用于大多数用户定义的视图函数，因为它们通常不遵循相同的形状。所以它实际上更专业化，而不是泛化/佩丹蒂公平地说，我的措辞是不准确的，所以一旦我们就更好的表述达成一致，我会纠正它。但是包装器可以在所有
Html
标记上工作，因此它可以在用户定义的视图函数中工作。您的解决方案对“大多数用户定义的视图函数”也不起作用，因为它需要一个
列表（Html msg）
，而“大多数用户定义的视图函数”不会生成该列表。关于@glennsl的措辞，你有什么建议吗？将
MarkupFunction
重命名为
HtmlTag
，并用一些关于包装
Html
标记的东西来替换第一行，以消除歧义？措辞不是很重要，我只是个书呆子。但是专门化
Html
函数会更准确。