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>

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

相关推荐
—Qeyser15 小时前
Flutter Text 文本组件完全指南
开发语言·javascript·flutter
程序员小李白15 小时前
js数据类型详细解析
前端·javascript·vue.js
weixin_4624462315 小时前
Python用Flask后端解析Excel图表,Vue3+ECharts前端动态还原(附全套代码)
前端·python·flask·echats
Kratzdisteln15 小时前
【1902】0120-3 Dify变量引用只能引用一层
android·java·javascript
满栀58515 小时前
jQuery 递归渲染多级树形菜单
前端·javascript·jquery
闲蛋小超人笑嘻嘻15 小时前
Flexbox 属性总结
前端·css
TOPGUS15 小时前
谷歌将移除部分搜索功能:面对AI时代的一次功能精简策略
前端·人工智能·搜索引擎·aigc·seo·数字营销
运筹vivo@15 小时前
攻防世界: ics-05
前端·web安全·php
qq_3380329215 小时前
Vue/JS项目的package.json文件 和java项目里面的pom文件
java·javascript·vue.js·json
不思念一个荒废的名字15 小时前
【黑马JavaWeb+AI知识梳理】Web前端开发 - Vue3 / ElementPlus
前端