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 分钟前
⏰前端周刊第 458 期v2026.3.24
前端·javascript·面试
前端付豪20 分钟前
实现必要的流式输出(Streaming)
前端·后端·agent
张元清22 分钟前
useMediaQuery:React 响应式设计完全指南
前端·javascript·面试
小金鱼Y23 分钟前
一文吃透 JavaScript 防抖:从原理到实战,让你的页面不再 “手抖”
前端·javascript·面试
Z兽兽26 分钟前
React 18 开发环境下useEffect 会执行两次,原因分析及解决方案
前端·react.js·前端框架
紫_龙28 分钟前
最新版vue3+TypeScript开发入门到实战教程之Vue3详解props
前端·vue.js·typescript
孟陬33 分钟前
为什么国外技术大神都爱自己搭博客,而国内程序员却挤在微信公众号或掘金?
java·typescript·前端框架
树上有只程序猿34 分钟前
这波低代码热,能维持多久
前端
姓王名礼40 分钟前
这是一个完整的全栈交付包,包含Vue3 前端交互界面(集成数字人视频流、ECharts 图表、语音对话)和Docker Compose 一键部署脚本。
前端·docker·echarts
嵌入式-老费43 分钟前
vivado hls的应用(axis接口)
前端·webpack·node.js