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>

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

相关推荐
Java_2017_csdn18 分钟前
在 Java 中,MessageFormat.format() 和 String.format() 函数对比?
java·开发语言·前端·数据库
IT策士18 分钟前
第 44篇 k8s之实战:将 Web 应用迁移到 Kubernetes(上)
前端·容器·kubernetes
用户0595401744630 分钟前
把Agent记忆测试从Mock换到真实Redis,漏测率从30%降到0
前端·css
Surprisec32 分钟前
如何用 TypeScript 写一个最小可运行的 CLI Agent
前端·人工智能·typescript
marskim32 分钟前
零依赖、高性能!从零实现 React 拖拽排序组件(基于 HTML5 Drag and Drop API)
前端
jingling55534 分钟前
从零到一:用 Aholo Viewer 在浏览器里渲染 3D 高斯泼溅小熊
linux·前端·ubuntu·3d
gogoing35 分钟前
React Hooks 完整指南
react.js
情多多7736 分钟前
基于NetCorePal Cloud Framework的DDD架构管理系统实践
javascript
Good kid.42 分钟前
开源一套 Vue3 多模态 AI 控制台前端:游乐场、工作室与 API 文档页
前端·人工智能·开源
小林ixn42 分钟前
前后端模块化分离实战:从零搭建用户列表展示(HTML+CSS+JS + json-server)
前端·javascript