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>

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

相关推荐
牛奶14 分钟前
分享一个开源项目,让 AI 辅助开发真正高效起来
前端·人工智能·全栈
次顶级1 小时前
表单多文件上传和其他参数处理
前端·javascript·html
why技术1 小时前
我拿到了腾讯QClaw的内测码,然后沉默了。
前端·后端
小一梦2 小时前
宝塔面板单域名部署多个 Vue 项目:从路径冲突到完美共存
服务器·javascript·vue.js
谪星·阿凯2 小时前
XSS漏洞解析博客
前端·web安全·xss
ole ' ola2 小时前
lambda表达式
java·前端·jvm
wefly20172 小时前
无需安装、开箱即用!m3u8live.cn 在线 HLS 播放器,调试直播流效率翻倍
前端·后端·python·前端开发工具·后端开发工具
UXbot2 小时前
为什么 AI 正在重新定义 UI 设计工具的入门门槛
前端·人工智能·低代码·ui·交互·ai编程·ux
柳杉3 小时前
两款惊艳的 WebGL 开源项目推荐
前端·javascript·数据可视化
给算法爸爸上香3 小时前
web网页显示点云
前端·3d·web·点云