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>

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

相关推荐
倒霉熊dd13 小时前
Python 学习(第二部分:函数、模块与面向对象编程)
前端·数据库·python
gCode Teacher 格码致知13 小时前
Javascrip提高:CSS backdrop-filter的使用方法-由Deepseek产生
前端·css
gCode Teacher 格码致知13 小时前
Javascript提高:canvas画布的网格背景-由Deepseek产生
javascript·css·css3
清灵xmf13 小时前
JS 原生深拷贝的终极方案——structuredClone
前端·javascript·vue.js·json.stringify·structuredclone
前端 贾公子14 小时前
响应式系统基础:依赖追踪的基础 —— 发布订阅模式(前端应用最广的设计模式)上
javascript·vue.js
索西引擎14 小时前
【理论】TypeScript 函数重载:从 Vue 3 defineEmits 说起的类型安全实践
前端·typescript
女生也可以敲代码14 小时前
2026前端面试题精选:大厂高频考点与标准答案
前端
Jinuss14 小时前
代码质量管理工具-SonarQube
前端·代码规范
gCode Teacher 格码致知14 小时前
Javascript提高:使用canvas绘制一个绚丽的按钮-由Deepseek产生
javascript·css·css3
ZFSS14 小时前
WebExtrator 网页渲染与内容提取 API 使用指南
前端·人工智能·ai·ai编程