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>

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

相关推荐
树叶会结冰2 分钟前
TypeScript---循环:要学会原地踏步,更要学会跳出舒适圈
前端·javascript·typescript
Zyx200716 分钟前
JavaScript 中的 this:作用域陷阱与绑定策略
javascript
唐叔在学习16 分钟前
前端响应式设计实践:布局与字体自适应方案
前端·响应式设计
海云前端120 分钟前
如果要设计一个开源的Code EditorSDK,你会向开发者暴露哪些API?
前端
2501_9462447823 分钟前
Flutter & OpenHarmony OA系统底部导航栏组件开发指南
android·javascript·flutter
Access开发易登软件31 分钟前
Access 数据可视化:如何制作箱形图
前端·数据库·vba·access·access开发
Tiramisu202337 分钟前
【VUE】删除 node_modules几种高效方法
前端·javascript·vue.js
钰fly37 分钟前
Windows Forms开发工具与功能总结表
前端·c#
共享家952741 分钟前
测试常用函数(一)
java·前端·javascript
两个人的幸福online42 分钟前
给cocos 3.8 消息控制器
开发语言·javascript·ecmascript