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>

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

相关推荐
袋鼠云数栈UED团队20 分钟前
一套 Spec-First 的 AI 编程工作流
前端·人工智能
袋鼠云数栈前端24 分钟前
一套 Spec-First 的 AI 编程工作流
前端·ai+
angerdream26 分钟前
Android手把手编写儿童手机远程监控App之vue3 路由守卫
前端
不服老的小黑哥33 分钟前
AI规范驱动编程-harness工程项目实战
前端
vivo互联网技术34 分钟前
从 Web 到桌面:基于 Tauri 2.0 + Vue 3 打造 vivo 线下门店「大头贴」拍照体验系统
前端·rust
光影少年36 分钟前
React 合成事件机制、和原生事件区别、事件冒泡阻止
前端·react.js·掘金·金石计划
没有鸡汤吃不下饭37 分钟前
告别手动对接口:我用 OpenAPI JSON 做了一个前端接口同步 Skill
前端·ai编程
空栈独白37 分钟前
NestJS实战-前后端联调
前端
米饭同学i38 分钟前
浏览器记住密码导致忘记密码页面输入框回显错乱?看这篇就够了
前端
孤舟望月38 分钟前
NestJS实战-后端开发-全局配置
前端