如何在Elm-UI中添加HTML换行（<br>）效果？

为什么直接用\n不会触发换行 #

Elm-UI 默认的文本渲染遵循浏览器标准的 white-space: normal 规则，该规则会把所有连续空白字符（包括换行符、连续输入的空格）折叠为单个空格展示，这就是你之前写\n完全没有换行效果的核心原因，和换行符的写法本身没有关系。

可直接落地的换行实现方式 #

• 方案1：最小改动，让原有\n直接生效
  只需要给包裹文本的元素追加自定义样式，把white-space规则切换为pre-line即可。这个规则会完整保留文本内的换行符，同时保留正常的自适应折行能力，不会因为多余的空格撑乱布局：

  import Element as El
  import Html.Attributes as Attr
  
  view =
      El.text "第一行内容\n第二行内容\n第三行内容"
          |> El.el
              [ El.htmlAttribute <| Attr.style "white-space" "pre-line"
              ]
  

• 方案2：用Elm-UI原生排版实现多行换行（更推荐）
  不要把多段文本全部塞进单个text块里，使用垂直排列的column容器拆分每一行文本，还能通过spacing属性灵活控制行间距，是Elm-UI官方推荐的多行文本书写逻辑：

  import Element as El
  
  view =
      El.column
          [ El.spacing 8 -- 自定义行与行之间的垂直间距
          ]
          [ El.text "第一行内容"
          , El.text "第二行内容"
          , El.text "第三行内容"
          ]
  

关于插入<br>标签的注意事项 #

不推荐直接在Elm-UI的布局树中插入裸的<br>标签实现换行：
Elm-UI 的整套布局计算完全基于Flexbox实现，裸<br>不属于布局流内的Flex子元素，很容易打乱原本的对齐逻辑、间距计算，出现意料之外的排版错位，实际使用的稳定性远不如上面两种方案。

内容的提问来源于stack exchange，提问作者Brock