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

最新推荐文章于 2024-08-29 11:19:57 发布
最新推荐文章于 2024-08-29 11:19:57 发布
阅读量935 收藏
点赞数
分类专栏： HTML vue-katex 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43778935/article/details/121795202
版权
在使用vue-katex组件时遇到预览文本换行问题，通过研究发现是white-space属性影响。katex官网的strict配置让人误以为无法实现换行，但设置white-space: pre-wrap成功解决了问题，使普通文本在组件预览中实现换行。
摘要由CSDN通过智能技术生成

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

<Tabs type="card" value="child_name1" :animated="false" name="child">
      <TabPane label
最低0.47元/天 解锁文章
团子Y
关注
专栏目录
Vue v-for循环自动换行
张音乐的博客
08-06 9564
如图所示,每行显示4个卡片 <template> <el-row align="middle" type="flex" style="flex-wrap: wrap"> <el-col :lg="{ span:6 }" v-for="(item) in schemaList" :key="item.id" :offset="0" class="card-col-wb"> <el-card class="box-card"&..
vue-katex:KaTeX的Vue插件
04-28
Vue-Katex KaTeX启用了Web的快速数学排版。 vue-katex是一个轻量级的插件，它引入了一种在Vue应用程序中使用的简单方法。 享受！ :slightly_smiling_face: 安装 使用katex作为对等依赖项安装vue-katex # With NPM npm i vue-katex katex -P # With Yarn yarn add vue-katex katex 如中所述，您还必须添加相关的样式表。 < style > @import "../node_modules/katex/dist/katex.min.css" ; </ style > 或者 import 'katex/dist/katex.min.css' ; 入门 在脚本入口点： import Vue from 'vue' ; import VueKatex from 'vue-katex' ; import 'k
vue white-space正确处理元素的内的换行元素
cominglately的博客
08-01 4241
场景 分析 参考文档 解决 场景 vue textarea填充了一些数据,但是展示的不出需要的效果, 换行符失效 分析 检查了textarea &amp;&amp; 以及 存到数据库中的数据 ，换行符是有的，所以问题出在展示的地方 因为使用vue 所以在解析数据的时候使用的是vue的解析符号{{}} 而不可以使用laravel的{!! !!} 所以没...
vue报错：error Parsing error: missing-whitespace-between-attributes
qq_62237063的博客
07-18 187
参考博客。
css 解析空格style=“white-space: pre-wrap；，Vue中解析＜/br＞ v-html
weixin_45502613的博客
07-27 786
<div style="white-space: pre-wrap;" v-html="order.callerContent"> </div>
vue 标签内文本换行换行问题:“white-space: pre-wrap“
peer__的博客
07-01 423
2.换行之后会带来另一个问题,第一行抬头渲染时会被加入一个空格,并且替换不了那个空格,我的解决方法是加上属性"text-index:-5px;"反向使用首行缩进,抵消掉开头的空格。1.vue标签内容带回车符,仍然不会换行显示,这时加上"white-space: pre-wrap"属性后就能显示换行符"\n"的效果了。
vuepress-plugin-katex:适用于VuePress的Katex插件
05-04
vuepress-plugin-katex 适用于VuePress的Katex插件 安装 yarn add -D @maginapp/vuepress-plugin-katex # or npm install -D @maginapp/vuepress-plugin-katex 用法 配置 module . exports = { // ... plugins : ...
markdown-it-katex, 向 Markdown 添加数学，使用KaTeX插件进行 Markdown.zip
09-17
markdown-it-katex, 向 Markdown 添加数学，使用KaTeX插件进行 Markdown markdown-it-katex将数学添加到 Markdown KaTeX 比MathJax更快速。 这个插件很容易在你的Markdown 中支持。需要有说服力？查看比较基准： ...
vue3 中保留文本中空格和换行 white-space: pre-wrap
Ll307748784的博客
03-04 1389
我们添加了style = "white-space: pre-wrap" 这个属性的时候。我们打一个比方说后端传入的文本是有空格换行的时候我们想进行复原显示的话。标签）也会被保留，并且会在这些位置换行。
VaTex:vue latex的一个插件（基于katex），支持vue2和vue3
08-05
增值税 vue latex 公式显示插件，适用于 Vue2/Vue3。 简单封装katex。 也是的vue3版本，参考了很多代码，在此感谢。 安装 安装 vue-katex 与 katex 作为对等依赖 # With NPM npm i vatex katex # With Yarn yarn add vatex katex Vue2 开发者需要安装 composition-api yarn add @vue/composition-api 入门 Vue3 全球注册 import { createApp } from 'vue' import VueLatex from 'vatex' app . use ( VueLatex ) . mount ( '#app' ) 然后 < vue-latex : expression = " ' \\ frac{a_i}{1+x}
Latex 如何换行，分段，换页
热门推荐
m0_52515790的博客
10-13 3万+
Latex 编辑
vue 文本超出，换行展示，添加white-space: pre-wrap无效
张媛的博客
07-09 2006
解决：添加两个样式word-break: break-all; word-wrap: break-word;
vue katex_在Vue应用中使用KaTeX的简单指令
cuk5239的博客
07-27 3184
vue katex Vue-Katex (vue-katex) KaTeX enables fast math typesetting for the web. This plugin introduces a simple directive to use KaTeX in your Vue app. Enjoy! KaTeX启用了Web的快速数学排版。 该插件引入了一个简单的指令，可在您的V...
Vue——整合Katex
无限迭代中......
03-13 3342
解决方案 <template> <span ref="latex" class="katex" v-html="rawHTML" /> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ name: 'Latex', }) </script> <script lang="ts" s
强力推荐：vue-katex —— 拥抱网页数学排版的新纪元！
gitblog_00816的博客
08-28 324
强力推荐：vue-katex —— 拥抱网页数学排版的新纪元！ vue-katexVue plugin for KaTeX项目地址:https://gitcode.com/gh_mirrors/vu/vue-katex 在数字时代，高质量的数学公式展示已变得不可或缺，尤其是在教育、科研和技术文档中。vue-katex，作为一款轻量级的Vue插件，正是为此而生，它让KaTeX——这个高效快速的数学...
Vue-Katex的引入和使用
最新发布
m0_52045211的博客
08-29 175
2.在App.vue目录中引用。style中注册文件。
vue 表格，折行样式
m0_46341331的博客
07-12 396
<el-table-column label="状态" header-align="center" sortable> <template v-slot="scope"> <p v-if="scope.row.is_status == 0"> <span class="pending_review">·</span>待审核 </p> ..
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值