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>

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

相关推荐
达达尼昂1 分钟前
🎯 Flutter 拖拽选择组件:flutter_drag_selector —— 像选文件一样选择列表项
前端·flutter
Keely4028520 分钟前
Claude 配置使用墨刀MCP(modao-proto-mcp)
前端·aigc·claude
少卿25 分钟前
从零构建 React Native 导航体系-React Navigation
前端·react native
Wect26 分钟前
学习React-DnD:实现 TodoList 简单拖拽功能
前端·react.js
前端小书生27 分钟前
Google Map、Solar Api
前端·react.js·google
毕设十刻38 分钟前
基于Vue的售票系统开发3g480(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js
T***160742 分钟前
前端框架开发实战
前端框架
S***q19244 分钟前
前端框架对比
前端框架
行走的陀螺仪1 小时前
前端CI/CD 流程
前端·ci/cd·工程化·自动化构建
裕波1 小时前
前端,不止于 AI。12 月 20 日,FEDAY 2025,长沙见!
前端