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>

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

相关推荐
克喵的水银蛇几秒前
Flutter 自定义 Widget 实战:封装通用按钮 + 下拉刷新列表
前端·javascript·flutter
Li_na_na01几秒前
React+dhtmlx实现甘特图
前端·react.js·甘特图
艾体宝IT1 分钟前
艾体宝干货 | Redis Java 开发系列#2 数据结构
javascript
用户2965412759171 分钟前
JSAPIThree 加载 Cesium 数据学习笔记:使用 Cesium 地形和影像服务
前端
csdn小瓯3 分钟前
一个现代化的博客应用【react+ts】
前端·react.js·前端框架
一颗不甘坠落的流星6 分钟前
【@ebay/nice-modal-react】管理React弹窗(Modal)状态
前端·javascript·react.js
黛色正浓7 分钟前
【React】极客园案例实践-Layout模块
前端·react.js·前端框架
辛-夷9 分钟前
vue高频面试题
前端·vue.js
IT小哥哥呀11 分钟前
《纯前端实现 Excel 导入导出:基于 SheetJS 的完整实战》
前端·excel
郑州光合科技余经理13 分钟前
技术架构:跑腿配送系统海外版源码全解析
java·开发语言·前端·数据库·架构·uni-app·php