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>

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

相关推荐
再吃一根胡萝卜3 分钟前
从 Element UI 到 Element Plus:el-table 大数据量性能为何下降了?
前端
转转技术团队6 分钟前
转转UI自动化走查方案探索
前端
yzx99101310 分钟前
基于Flask的智能语音增强系统模拟
前端·javascript·html
青衫码上行15 分钟前
【Java Web学习 | 第14篇】JavaScript(8) -正则表达式
java·前端·javascript·学习·正则表达式
我的虾分发21 分钟前
虾分发是一个键打包封装APP内测分发平台
javascript
草帽lufei26 分钟前
解锁AI新维度:深入体验Google Antigravity的Gemini3模型
前端·ai编程·gemini
CoolerWu32 分钟前
TRAE SOLO实战:一个所见即所得的笔记软体
前端·trae
没落英雄34 分钟前
简单了解 shadowDom
前端·html
天才熊猫君35 分钟前
vue3 基于 el-table 的无限滚动自定义指令实现
前端·javascript
陳陈陳35 分钟前
AIGC 时代,用自然语言操作数据库:SQLite + LLM 的轻量级实践
前端·数据库·python