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>

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

相关推荐
web打印社区5 分钟前
前端开发实现PDF打印需求:从基础方案到专业解决方案
前端·vue.js·react.js·electron·pdf
时光追逐者6 分钟前
使用 MWGA 帮助 7 万行 Winforms 程序快速迁移到 WEB 前端
前端·c#·.net
搬砖的阿wei16 分钟前
CSS常用选择器总结
前端·css
2601_9498333936 分钟前
flutter_for_openharmony口腔护理app实战+意见反馈实现
android·javascript·flutter
摘星编程38 分钟前
OpenHarmony环境下React Native:自定义useFieldArray字段数组
react native·react.js·harmonyos
Trae1ounG1 小时前
Vue Iframe
前端·javascript·vue.js
阿部多瑞 ABU1 小时前
`tredomb`:一个面向「思想临界质量」初始化的 Python 工具
前端·python·ai写作
比特森林探险记1 小时前
React API集成与路由
前端·react.js·前端框架
爱上妖精的尾巴2 小时前
8-1 WPS JS宏 String.raw等关于字符串的3种引用方式
前端·javascript·vue.js·wps·js宏·jsa
hvang19882 小时前
某花顺隐藏了重仓涨幅,通过chrome插件计算基金的重仓涨幅
前端·javascript·chrome