elm - 如何在 Elm 中断行 html 文本

Question

我有这样的文字
Special menu:\nFrenchfire 1ea\nHamborger 2ea\nMeatball 1ea

我想在 Elm 中使用 Html 标签(例如 pre)对其进行断线或 span它应该像这样显示

Special menu:
Frenchfire 1ea
Hamborger 2ea
Meatball 1ea

我不知道要连接 br[][]如果它是榆树，则在字符串中
但是如果javascript我可以替换像 replace(/\n/g,'<br/>')这样的字符串它完成了。

Answer 1

你提到了 <pre>标签，所以让我们先试试:

import Html exposing (pre, text)

pre []
    [ text "Special menu:\nFrenchfire 1ea\nHamborger 2ea\nMeatball 1ea" ]

呈现为:

Special menu:
Frenchfire 1ea
Hamborger 2ea
Meatball 1ea

或者您可以将字符串拆分为单独的行。 String.split实现这一点:

String.split "\n" "Special menu:\nFrenchfire 1ea\nHamborger 2ea\nMeatball 1ea"

更好的是，如 kaskelotti恰本地建议:

String.lines "Special menu:\nFrenchfire 1ea\nHamborger 2ea\nMeatball 1ea"

使用 List.map将字符串转换为 Html 和 List.intersperse插入 <br />他们之间的标签:

import Html exposing (br, text)
List.intersperse (br [] [])
        (List.map text
            (String.lines "Special menu:\nFrenchfire 1ea\nHamborger 2ea\nMeatball 1ea")
        )

您最终会得到一个 Html 元素列表。完毕!

看到它呈现 here .

或者，如果您愿意，可以使用逐项列表:

import Html exposing (Html, div, h3, li, text, ul)


listItem : String -> Html msg
listItem content =
    li [] [ text content ]


main : Html msg
main =
    let
        split =
            String.lines "Special menu:\nFrenchfire 1ea\nHamborger 2ea\nMeatball 1ea"

        headline =
            Maybe.withDefault "Items:" (List.head split)

        items =
            Maybe.withDefault [] (List.tail split)
    in
    div []
        [ h3 [] [ text headline ]
        , ul [] (List.map listItem items)
        ]

看到它呈现 here .