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 分钟前
前端需要掌握的关于代理的相关知识
前端
爱敲代码的小冰7 分钟前
js 时间的转换
开发语言·前端·javascript
汝生淮南吾在北13 分钟前
SpringBoot+Vue游戏攻略网站
前端·vue.js·spring boot·后端·游戏·毕业设计·毕设
AAA阿giao13 分钟前
深入理解 JavaScript 中的面向对象编程(OOP):从构造函数到原型继承
开发语言·前端·javascript·原型·继承·原型模式·原型链
cos21 分钟前
React RCE 漏洞影响自建 Umami 服务 —— 记 CVE-2025-55182
前端·安全·react.js
ConardLi28 分钟前
分析了 100 万亿 Token 后,得出的几个关于 AI 的真相
前端·人工智能·后端
阿珊和她的猫36 分钟前
UTF - 8 编码在 HTML 中的重要性
前端·html
加油乐1 小时前
css及js实现正反面翻转
前端·javascript·css
恶猫1 小时前
抖音直播时,飘窗提示的html窗口,主播不在,正在喝9
前端·html·直播·抖音·素材
霁月的小屋1 小时前
Vue组件通信全攻略:从基础语法到实战选型
前端·javascript·vue.js