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>

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

相关推荐
忆江南12 分钟前
HTTP 各版本演进与 HTTPS 原理详解
前端
忆江南14 分钟前
对组件化与模块化的思考与总结
前端
小码哥_常19 分钟前
从0到1:Android组件化架构搭建秘籍
前端
忆江南19 分钟前
iOS 应用启动流程与优化详解
前端
itslife23 分钟前
前端架构模式思考
前端·架构
学高数就犯困28 分钟前
React:一个例子讲清楚 useEffect 和 useReducer
react.js
Wect29 分钟前
JSX & ReactElement 核心解析
前端·react.js·面试
雨落Re29 分钟前
从递归组件到 DSL 引擎:我造了一个让 AI 能"搭 UI"的运行时
前端·vue.js
Maxkim30 分钟前
前端工程化落地指南:pnpm workspace + Monorepo 核心用法与实践
前端·javascript·架构
大漠_w3cpluscom39 分钟前
使用 clip-path: shape() 创建 Squircle 形状
前端·css·weui