你提到了一个<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元素列表。完成!
在此处查看其渲染效果
(链接)。
或者,如果您愿意,可以使用项目列表:
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)
]
点击此处查看渲染后的效果。
div [] (List.map (\s -> span [] [ text s , br [] [] ] ) (String.replace "\n" text) )
但是我遇到了错误。这个replace
调用产生的类型是:#String -> String#
但是map
需要第二个参数是:#List String#
- Earn AsdsaString.replace
接受一个字符串类型的输入并返回一个字符串。List.map
需要作为输入的是一个字符串列表,即错误信息中所述的List String
。也许你可以使用String.split
代替replace
?这将删除换行符并返回一个字符串列表。编辑:String.lines
已经在换行符上断开字符串并返回一个字符串列表,最好使用它。 - kaskelotti