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 小时前
🔄记住这张图,脑子跟着浏览器的事件循环(Event Loop)转起来了
前端·javascript·浏览器
邹小邹-AI4 小时前
Rust + 前端:下一个十年的“王炸组合”
开发语言·前端·rust
行走在顶尖4 小时前
vue3+ant-design-vue
前端
百***35484 小时前
JavaScript在Node.js中的集群部署
开发语言·javascript·node.js
光影少年4 小时前
node.js和nest.js做智能体开发需要会哪些东西
开发语言·javascript·人工智能·node.js
华仔啊4 小时前
图片标签用 img 还是 picture?很多人彻底弄混了!
前端·html
lichong9514 小时前
XLog debug 开启打印日志,release 关闭打印日志
android·java·前端
南山安4 小时前
栈(Stack):从“弹夹”到算法面试题的进阶之路
javascript·算法·面试
畅畅畅哥哥5 小时前
React Router v7 全栈开发指南: 从新特性到部署实战
前端框架
烟袅5 小时前
作用域链 × 闭包:三段代码,看懂 JavaScript 的套娃人生
前端·javascript