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>

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

相关推荐
晴殇i2 分钟前
🎉 TRAE 一年使用的过程体验 🎉
前端
GDAL7 分钟前
Tailwind CSS Flex 布局深入全面教程
前端·css·tailwindcss
qq. 280403398410 分钟前
react --> redux
前端·react.js·前端框架
前端不太难12 分钟前
用 RN 的渲染模型,反推 Vue 列表的正确拆分方式
前端·javascript·vue.js
JS_GGbond17 分钟前
防抖与节流:前端性能优化“双剑客”
前端
KLW7522 分钟前
vue v-if和v-show比较
前端·css·css3
梵尔纳多26 分钟前
使用 Electron 实现一个简单的文本编辑器
前端·javascript·electron
晴殇i28 分钟前
SPA首屏加载速度优化!
前端
qq. 280403398429 分钟前
react 副作用探究
前端·react.js
小oo呆38 分钟前
【自然语言处理与大模型】LangChainV1.0入门指南:核心组件Streaming
前端·javascript·easyui