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>

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

相关推荐
A黄俊辉A几秒前
webstorm+vue+esLint+pretter配置
前端·vue.js·webstorm
TYFHVB121 分钟前
2026六大主流CRM横评,五大核心维度深度解析
大数据·前端·数据结构·人工智能
LiuMingXin4 分钟前
断网也能装包? 我在物理隔离内网搭了一套完整的私有npm仓库
前端·面试·npm
CHU7290359 分钟前
趣味抽赏,解锁惊喜——扭蛋机盲盒抽赏小程序前端功能解析
前端·小程序
一叶萩Charles11 分钟前
MCP 实战:国家统计局数据查询 Server 从开发到发布
javascript·人工智能·python·node.js
开开心心就好11 分钟前
Word批量转PDF工具,仅转换不合并很实用
java·前端·人工智能·edge·pdf·语音识别·模块测试
孫治AllenSun13 分钟前
【redis】redis重新创建集群
前端·javascript·redis
zhensherlock13 分钟前
Protocol Launcher 系列:一键唤起 VSCodium 智能 IDE
javascript·ide·vscode·typescript·开源·编辑器·github
Olafur_zbj17 分钟前
【AI】深度解析OpenClaw智能体循环(Agentic Loop):底层运行机制、ReAct演进与多智能体协同架构
人工智能·react.js·架构·agent·openclaw
卡皮巴拉c9917 分钟前
基于 wujie.js 进行微前端融合
前端