使用vue-katex组件遇到的换行问题 white-space

最近在整理项目的 LaTeX 编写组件时发现，使用tooltip渲染出来的文本可以正常显示文本的换行符 \n
但是在组件中的预览tab中却无法实现普通文本换行。
对比之后发现问题在 white-space属性的设置上。
首先 katex官网中 katex官网 关于strict配置的描述确实让我觉得在这里不能实现文本换行了

但是我觉得可以一试，于是就修改了 组件中的代码

<Tabs type="card" value="child_name1" :animated="false" name="child">
      <TabPane label="编写" name="child_name1" tab="child">
        <pre>如需编写LaTex公式,请在公式的开始和结束位置使用$$标记, 如$$\sqrt{a^2+b^2}$$</pre>
        <textarea :value="value" @input="changeDesc($event.target.value)" style="width: 100%;" rows="6"></textarea>
      </TabPane>
      <TabPane label="预览" name="child_name2" tab="child">
        <div v-katex:auto="{options:katex_config}" :key="numberKey" v-if="value" style="white-space: pre-wrap">{{ value }}</div>
        <pre v-else>如需编写LaTex公式,请在公式的开始和结束位置使用$$标记, 如$$\sqrt{a^2+b^2}$$</pre>
      </TabPane>
    </Tabs>

正是white-space: pre-wrap属性的设置，使得普通文本在组件预览中也可以换行了！！
效果如下：

关于 white-space属性：
定义和用法
white-space 属性设置如何处理元素内的空白。

这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。

默认值： normal

可能的值
值 描述

normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

标签：pre,vue,space,换行,katex,组件,white,文本
来源： https://blog.csdn.net/qq_43778935/article/details/121795202