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>

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

相关推荐
朱哈哈O_o3 分钟前
前端通用包的作用——md5篇
前端
Lsx_7 分钟前
🔍 React 有 useAntdTable,Vue3 怎么办?自封一个 useTable!
前端·javascript·vue.js
O***p60412 分钟前
TypeScript类型守卫
前端·javascript·typescript
小希smallxi27 分钟前
在 Spring Boot 项目中,如何在非 Web 层(如 AOP)中获取 Session 信息
前端·spring boot·后端
申阳30 分钟前
Day 14:个人开发者的 Cloudflare 通关指南-将域名托管到 Cloudflare
前端·后端·程序员
申阳31 分钟前
Day 13:个人开发者的 Cloudflare 通关指南-R2对象存储搭建高速免费图床
前端·后端·程序员
nvd1135 分钟前
niri 音频图形界面工具
前端·chrome·音视频
凯哥197036 分钟前
彻底解决 Windsurf 在 Vue DevTools 无法精准定位的问题
前端
凡人程序员37 分钟前
微前端qiankun接入的问题
前端·javascript
CharlieWang39 分钟前
AI Elements Vue,帮助你更快的构建 AI 应用程序
前端·人工智能·chatgpt