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>

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

相关推荐
三翼鸟数字化技术团队13 小时前
事件循环原来这么简单!
前端
gf132111114 小时前
python_【更新已发送的消息卡片】
java·前端·python
zithern_juejin14 小时前
typeof、instanceof与Object.prototype.toString()
javascript
一点一木14 小时前
2026 终端 AI 编码 Agent 六大工具深度横评
前端·人工智能·claude
Highcharts.js14 小时前
Highcharts React v5升级三问|最大的升级方向是什么?需要注意什么?有什么优化?
前端·javascript·react.js·前端框架·highcharts·大数据渲染·前端性能
马玉霞14 小时前
vue web端页面组件展示
前端·vue.js
129y14 小时前
JS入门参考:引擎、作用域与let/const,一起慢慢理解~
javascript
代码煮茶14 小时前
Vue3 权限系统实战 | 从 0 搭建完整 RBAC 权限管理
前端·javascript·vue.js
前端小木屋14 小时前
Node基础入门
javascript·node.js
IT_陈寒14 小时前
用了Vue的动态组件之后,我被坑得找不着北
前端·人工智能·后端