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>

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

相关推荐
很晚很晚了6 小时前
纯前端转全栈 Day 1:我从第一个 NestJS 接口开始
前端
Lee川7 小时前
从零解剖一个 AI Agent Tool是如何实现的
前端·人工智能·后端
wangruofeng8 小时前
Playwright 深度调研:为什么它成了浏览器自动化的新底座
前端·测试
__log10 小时前
Vue 2 → Vue 3 迁移实战指南:不只是升级语法,更是一次思维跃迁
react.js
李白的天不白10 小时前
SSR服务端渲染
前端
XinZong10 小时前
OpenClaw 实现「龙虾」vs 龙虾 vs 用户 ws对话实现方案 + 实际落地项目
javascript
卷帘依旧11 小时前
WebSocket 比 SSE 复杂在哪里
javascript
卷帘依旧11 小时前
SSE(Server-Sent Events)完全指南
前端
码云之上11 小时前
万星入坞:我们如何用三层插件体系干掉巨石应用
前端·架构·前端框架
kyriewen11 小时前
一口气讲清楚 Monorepo、Turborepo、pnpm、Changesets 到底是什么?
前端·架构·前端工程化