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>

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

相关推荐
白中白121383 分钟前
Vue系列-1
前端·javascript·vue.js
dorisrv5 分钟前
Next.js 16 自定义 SVG Icon 组件实现方案 🎨
前端
用户新28 分钟前
五万字沥血事件 深度学习 事件 循环 事件传播 异步 脱离新手区 成为事件达人
前端·javascript·事件·event loop
w2sfot37 分钟前
JS代码压缩
前端·javascript·html
码途潇潇44 分钟前
从组件点击事件到业务统一入口:一次前端操作链的完整解耦实践
前端
这是个栗子1 小时前
【JS知识点总结】JavaScript 中的精确取整:Math.floor、Math.ceil 与 Math.round
开发语言·javascript·ecmascript
import_random1 小时前
[python]miniconda(安装)
前端
云梦谭1 小时前
AI 生成的FreeSWITCH 呼出流程深度分析freeswitch-1.10.12.-release
java·前端·php
一只爱吃糖的小羊1 小时前
React 19:革命性升级与全面使用指南
react.js
秃了才能变得更强1 小时前
React Native小技巧
前端