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>

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

相关推荐
sTone873751 分钟前
Chrome devtools二次开发准备:获取源码和编译
前端·google
龙泉寺天下行走5 分钟前
[Powershell入门教程]第4天:模块、脚本编写、错误处理与 .NET 集成
java·服务器·前端
晴天丨12 分钟前
Vite:下一代前端构建工具深度解析与实践指南
前端
多来哈米15 分钟前
Jenkins配置vue前端项目(最简单的操作)
运维·前端·jenkins
一只叁木Meow16 分钟前
Vue scoped CSS 与 Element Plus Drawer 样式失效问题深度解析
前端
用户924262570073116 分钟前
Vue 学习笔记:组件通信(Props / 自定义事件)与插槽(Slot)全解析
前端
Zyx200717 分钟前
JavaScript 数组:从内存布局到遍历策略的深度解析
javascript
UIUV18 分钟前
Ajax 数据请求学习笔记
前端·javascript·代码规范
FogLetter19 分钟前
手写useInterval:告别闭包陷阱,玩转React定时器!
前端·react.js
神秘的猪头20 分钟前
Vibe Coding 实战教学:用 Trae 协作开发 Chrome 扩展 “Hulk”
前端·人工智能