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>

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

相关推荐
指尖的记忆几秒前
前端 Monorepo 实战指南:仓库多到切疯?
前端
csdn2015_7 分钟前
java 把对象转化为json字符串
java·前端·json
shughui9 分钟前
Fiddler(二):自动转发(AutoResponder)功能详解
前端·测试工具·fiddler
初见雨夜12 分钟前
OpenAI 官方出手:把 Codex 接进 Claude Code
前端·openai·ai编程
前端付豪12 分钟前
实现消息级操作栏
前端·人工智能·后端
GISer_Jing15 分钟前
Claude Code的「渐进式披露」——让AI Agent从“信息过载”到“精准高效”
前端·人工智能·aigc
apcipot_rain22 分钟前
HTML知识概述
前端·javascript·html
leiming630 分钟前
巧用 FreeRTOS 任务通知作“邮箱”:NeoPixel 灯环控制实战
java·前端·算法
茶底世界之下35 分钟前
Harbeth:高性能Metal图像处理库,让你的图片处理速度飞起来!
前端·github·swift
wangfpp38 分钟前
Pretext 如何颠覆前端文本布局
前端