react-markdown内容宽度溢出和换行不生效问题

情景复现:

解决办法,添加样式进行限制

css 复制代码
/* index.css */
.markdown-container {
  word-break: break-word; /* 强制长单词断行 */
  white-space: pre-wrap; /* 保留空白符序列,但是正常地进行换行 */
  overflow-wrap: break-word; /* 在长单词或 URL 地址内部进行换行 */
}
js 复制代码
// tsx文件内
 <ReactMarkdown className={"markdown-container"} remarkPlugins={[remarkGfm]}>
 {text}
 </ReactMarkdown>

添加样式后,即可解决问题,如下图所示:

相关推荐
苏武难飞4 分钟前
THREE.JS实现一个魔法镜子!
前端·css·three.js
云浪5 分钟前
从 0 到 1 搭建 RAG 应用:用 LangChain + Chroma + qwen-plus 实现《红楼梦》问答
javascript·vue.js·人工智能
小流苏生15 分钟前
工作十年了,慢慢学习敬畏死亡
前端·程序员·ai编程
xiaoxue..17 分钟前
react:浅聊 vdom 与 diff 算法
前端·javascript·react.js·面试
恋猫de小郭18 分钟前
Flutter 3.41.7 ,小版本但 iOS 大修复,看完只想说:这是人能写出来的 bug ?
android·前端·flutter
止语Lab22 分钟前
记忆溢出:当你的 Agent 记得太多时会发生什么
前端·javascript·vue.js
天天向上102423 分钟前
vue openlayers地图加载大量点位时优化
前端·javascript·vue.js
devil-J33 分钟前
vue3+three.js中国3D地图
开发语言·javascript·3d
菩提小狗1 小时前
第42天:WEB攻防-PHP应用&MYSQL架构&SQL注入&跨库查询&文件读写_笔记|小迪安全2023-2024|web安全|渗透测试|
前端·安全·php
liuyouzhang4 小时前
将基于Archery的web数据库审计查询平台封装为jdbc接口的可行性研究(基于AI)
前端·数据库