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>

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

相关推荐
海上彼尚1 天前
Nodejs也能写Agent - 16.LangGraph篇 - 条件分支与循环
前端·后端·langchain·node.js
To_OC1 天前
从 “卡死半天” 到 “打字机效果”:大模型流式输出前端实现全记录
前端·javascript·llm
rockey6271 天前
基于AScript的JavaScript脚本语言发布啦
javascript·c#·.net·js·script
SoaringHeart1 天前
Flutter最佳实践:键盘辅助视图输入框天添加图片附件
前端·flutter
kyriewen1 天前
我看完这篇安全论文——AI推荐的npm包,92%是编出来的
前端·javascript·ai编程
心中有国也有家1 天前
AtomGit Flutter 鸿蒙客户端:Canvas 绘制进阶-路径、渐变与混合模式
android·javascript·flutter·华为·harmonyos
小心我捶你啊1 天前
数据采集和Web解锁不是一回事,从用途到规则区分
前端·爬虫·网络协议
hunterandroid1 天前
[鸿蒙从零到一] ArkUI 基础组件实战:Text、Image、Button 与 TextInput
前端
fsssb1 天前
Chromium 源码学习笔记(五):一次点击,在进入 JS 之前先经历了什么?
前端