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>

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

相关推荐
狂炫冰美式8 分钟前
电脑合盖之后 Cursor 还在偷我电?看看为啥
前端·人工智能·后端
leeyi8 分钟前
微前端:14 个子应用是怎么做到不散架的——DeepFlux 前端工程拆解(第102篇)
前端·aigc·agent
2603_9658966226 分钟前
JavaScript 对象零基础详解|属性、方法、遍历、增删改查
开发语言·javascript·ecmascript
天道kabuto35 分钟前
踩坑实录:JS Map迭代器为什么“用完即焚”?兼谈技术知识沉淀
前端
字节跳动开源38 分钟前
VisActor全新图可视化开源项目:VGraph
前端·设计模式·开源
打呵欠的猫40 分钟前
前端接口超时从 15s 改到动态值后,用户投诉降了 60%——AI 帮我分析出的方案
前端·ai编程
岁月宁静40 分钟前
二、《从零手撸 Agent》 — 聊聊 LLM 的失忆真相
前端·python·agent
郭邯1 小时前
用纯前端实现一个代码压缩美化工具,我踩了这三个坑
前端
用户283209679371 小时前
从进程线程到 async/await:JS Event-loop事件循环机制底层解析
前端·javascript
岁月宁静1 小时前
一、《从零手撸 Agent》 我用 10 行代码跑通了第一次大模型调用(顺便踩了 4 个坑)
前端·python·agent