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>

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

相关推荐
美狐美颜sdk4 分钟前
2026主流直播美颜sdk对比:效果、算法与成本分析
前端·人工智能·计算机视觉·美颜sdk·直播美颜sdk·第三方美颜sdk·视频美颜sdk
王霸天6 分钟前
🚨 还在用 rem) 做大屏适配?用 vfit.js 一键搞定,告别改稿8版的噩梦!
前端·vue.js·数据可视化
文心快码BaiduComate20 分钟前
Comate AI IDE三大能力升级:支持语音输入& AI可操作浏览器 & Figma设计与代码双向转换
前端·后端·程序员
coder_Eight32 分钟前
LRU 缓存实现详解:双向链表 + 哈希表
前端·算法
1024小神38 分钟前
kotlin安卓项目配置app横屏等方式
前端
Cxiaomu41 分钟前
React + Node.js 实战:用豆包端到端实时语音大模型 API 落地web纯语音助手
前端·react.js·node.js
Electrolux41 分钟前
2026年了,你敢信一些知名的开源库都还不会正确使用防抖节流吗
前端
Beginner x_u44 分钟前
前端八股整理|JavaScript|高频小题 01
开发语言·前端·javascript
Flutter笔记44 分钟前
如何在本地跑 Core ML 模型识别呼噜声,并用 iCloud 优雅同步?
前端·人工智能·程序员
Greg_Zhong1 小时前
前端测试的学习阶段,由基础到进阶的过程认识.....
前端·前端、专业测试结合