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>

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

相关推荐
之歆2 分钟前
DAY_18深度解析:数据类型转换与运算符全攻略(上)
前端·javascript
大家的林语冰9 分钟前
pnpm 11 发布,弃用 JSON 和 npm CLI,进化为纯 ES6 模块,新增 pnpm pack-app 等命令,供应链保护默认启用,要求 Node
前端·javascript·node.js
漓漾li20 分钟前
每日面试题-前端2
前端·react.js·面试
Alice-YUE29 分钟前
深入解析 JS 事件循环:浏览器与 Node.js 的差异全解析
前端·javascript·笔记·学习
HYCS30 分钟前
用pixijs实现fabricjs(二):对象的基础位置信息
前端·javascript·canvas
Alice-YUE31 分钟前
【无标题】
开发语言·javascript·ecmascript
淸湫34 分钟前
项目中使用了全局权限管理,请详细描述如何通过Vue Router的路由守卫来实现全局权限控制?
前端·vue.js
Twsit丶36 分钟前
ECMAScript 常用特性整理(ES6 — ES13)
javascript
雪铃儿37 分钟前
Shorebird 之外,Flutter Android 热更新还有什么选择
android·前端
李剑一42 分钟前
前端必看 | Vue 刷新页面,生命周期钩子直接 "罢工",原来问题在这?90% 开发者都栽过!
前端·vue.js