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>

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

相关推荐
Bigger6 分钟前
Agent 循环:AI 助手的思考引擎
前端·ai编程·claude
yqcoder7 分钟前
数据的“洁癖”管家:深入解析 JavaScript Set
开发语言·javascript·ecmascript
专注VB编程开发20年12 分钟前
b4a用VB语言开发安卓APP-图片缩放库ZoomImageView讲解-双指缩放 + 单指拖动核心源码
android·java·前端
之歆13 分钟前
Day16_JavaScript Event 对象深度解析(上篇)
开发语言·javascript·ecmascript
Mike_jia13 分钟前
ShipShipShip:构建你的专属产品发布中心与社区互动平台
前端
a11177614 分钟前
闪卡网页 第五人格 html 开源
前端·html
冴羽yayujs21 分钟前
前端周报:Google I/O 发布 Agentic Web、TypeScript 6.0 正式版、npm 安全新策略
前端·javascript·前端开发·前端学习·前端周报
IT_陈寒29 分钟前
Vite踩坑实录:静态资源加载把我搞懵了
前端·人工智能·后端
李伟_Li慢慢34 分钟前
实时动画缓冲
前端·机器人·three.js
恋猫de小郭34 分钟前
Dart 大更新,新增语法糖和各种能力,真的难得了
android·前端·flutter