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>

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

相关推荐
co松柏16 分钟前
AI+Excalidraw,用自然语言画手绘风格技术图
前端·人工智能·后端
用户812748281512024 分钟前
安卓Settings值原理源码剖析存储最大的字符数量是多少?
前端
用户812748281512028 分钟前
安卓14剖析SystemUI的ShadeLogger/LogBuffer日志动态控制输出dumpsy机制
前端
Ankkaya30 分钟前
cloudflare + github 实现留言板
前端·github
是你的小橘呀30 分钟前
单页应用路由怎么搞?React Router 从原理到实战全解析!
前端·javascript
xuedaobian31 分钟前
2025年我是怎么用AI写代码的
前端·程序员·ai编程
风止何安啊31 分钟前
Set/Map+Weak三剑客的骚操作:JS 界的 “去重王者” ,“万能钥匙”和“隐形清洁工”
前端·javascript·面试
saberxyL31 分钟前
前端登录加密与Token管理实践
前端
3秒一个大35 分钟前
React 中 Context 的作用与用法:从主题切换案例说起
前端·react.js
2501_9444460043 分钟前
Flutter&OpenHarmony文本输入组件开发
前端·javascript·flutter