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>

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

相关推荐
用户28145125499219 小时前
迷你React手写系列-React基本概念
react.js
墨渊君19 小时前
OpenClaw 上手实践: 使用 Docker 从构建到可用全流程指南
前端·agent
冰暮流星19 小时前
javascript之回调函数
开发语言·前端·javascript
米丘19 小时前
Rollup 打包工具
前端
We་ct19 小时前
LeetCode 74. 搜索二维矩阵:两种高效解题思路
前端·算法·leetcode·矩阵·typescript·二分查找
moneyinto19 小时前
Three.js 必背核心方法
前端
wuhen_n19 小时前
Vue3 组件中的图片懒加载与渐进式加载
前端·javascript·vue.js
叫回忆19 小时前
elpis的npm抽离与发布
前端·javascript
wuhen_n19 小时前
Vite 构建层面的图片优化:从压缩到转换
前端·javascript·vue.js
hashiqimiya19 小时前
vue项目组装-路由-文件修改地方
前端·javascript·vue.js