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>

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

相关推荐
cjy00011127 分钟前
2026年9月零基础能听懂国内 FDE 讲师的课吗?
大数据·前端·人工智能·fde
南雨北斗41 分钟前
wangeditor5 在vue3项目中的正确配置
前端
老三_Micheal42 分钟前
一文搞懂 Axios 请求参数详解:headers、params 与 body 的区别和使用场景
javascript
Cache技术分享43 分钟前
517. Java 方法句柄 - 方法句柄 vs 反射 API
前端·后端
小刘在重生~44 分钟前
Web 前端基础|HTML+CSS+JavaScript+Bootstrap
前端·css·html
是立不是利1 小时前
第二篇:CSS 与用户体验——看不见的设计
前端·css·ux
研☆香1 小时前
js中 onload 事件的用法
开发语言·javascript·ecmascript
打呵欠的猫1 小时前
我把 20 个页面的权限控制从"硬编码"改成"配置驱动",AI 帮我生成了 80% 的迁移代码
前端·ai编程
志尊宝1 小时前
Vue3 零基础每日笔记(005):ref 响应式基础——为什么 script 里要 .value
前端·javascript·vue.js·笔记
海鸥两三1 小时前
Mac电脑使用 Tabby 部署前端项目到阿里云服务器完整教程
前端·macos·阿里云