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>

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

相关推荐
We་ct14 分钟前
LeetCode 236. 二叉树的最近公共祖先:两种解法详解(递归+迭代)
前端·数据结构·算法·leetcode·typescript
用泥种荷花24 分钟前
【LangChain.js学习】 提示词模板
前端
认真的薛薛44 分钟前
2-监控:elk采集各种日志并出图
前端·chrome·elk
hypnos_xy1 小时前
Vue3 工程构建
vue.js·前端框架
叶落阁主1 小时前
别再从 0 造后台了:`antdv-next-admin`,开箱即用的 Vue 3 中后台脚手架
前端
yiranlater1 小时前
状态驱动渲染和事件驱动模型
前端
csdn飘逸飘逸1 小时前
Autojs基础-控件操作
javascript
yuki_uix1 小时前
用 useState 管理服务端数据?不如试试 React Query 来“避坑”
前端
薛定e的猫咪1 小时前
Vibe Coding范式实战:用AI工具链(Stitch+Figma+ai studio+Trae)快速开发全栈APP
前端·人工智能·react.js·github·figma
折七1 小时前
2026 年 Node.js 后端技术选型,为什么我选了 Hono 而不是 NestJS
前端·后端·node.js