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>

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

相关推荐
JEECG低代码平台10 小时前
终端里的AI搭档:我用Claude Code提效的实战心得
前端·人工智能·chrome
HelloReader11 小时前
Flutter ChangeNotifier用 ViewModel 管理应用状态(九)
前端
用户40993225021211 小时前
Vue 3 静态与动态 Props 如何传递?TypeScript 类型约束有何必要?
前端·vue.js·后端
程序员库里11 小时前
TipTap简介
前端·javascript·面试
关中老四11 小时前
【js/web甘特图插件MZGantt】如何使用外部弹框添加和修改任务(updRows方法使用说明)
前端·javascript·甘特图·甘特图插件
大雷神11 小时前
HarmonyOS APP<玩转React>开源教程四:状态管理基础
react.js·开源·harmonyos
兆子龙11 小时前
Vite 打包优化实战:从 12.17M 到 7.95M 的瘦身之旅
javascript
nunumaymax11 小时前
css实现元素和文字从右向左排列
前端·css
confiself11 小时前
A2UI实时渲染展示
开发语言·javascript·css