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>

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

相关推荐
Asize23 分钟前
多模态生图:从 Vite 工程化到前端调用 Qwen Image
javascript·人工智能·后端
MariaH24 分钟前
初识MySQL
前端
陳陈陳29 分钟前
从Token到Embedding:一篇文章搞懂大模型的「文字数学变形记」
前端·javascript·ai编程
十有八七29 分钟前
AI时代的置身X内
前端·人工智能
用户9385156350738 分钟前
从 O(n²) 到 O(nlogn):一文读懂快速排序的“快”与“妙”
javascript·算法
橘子星44 分钟前
LLM 无状态架构实践:从原理到代码落地
前端·javascript·人工智能
LiuMingXin44 分钟前
意图与代码之间:AI编程范式全景解读
前端·后端·面试
壹方秘境1 小时前
ApiCatcher支持抓包HTTP传输大文件的实现原理分享
前端·后端·客户端
一份执念2 小时前
uni-app项目 (vue+vite + uni-UI)中引入umd格式JS文件,微信小程序中导入报错处理方案
前端·uni-app·echarts
To_OC2 小时前
手写快排次次翻车?别死背快排模板了,这才是面试官想听的底层逻辑
javascript·算法·排序算法