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>

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

相关推荐
2501_948194981 分钟前
RN for OpenHarmony AnimeHub项目实战:正在热播页面开发
javascript·react native·react.js
2501_944521002 分钟前
rn_for_openharmony商城项目app实战-语言设置实现
javascript·数据库·react native·react.js·harmonyos
AdleyTales7 分钟前
vscode识别不了@提示找不到路径解决
前端·javascript·vscode
去哪儿技术沙龙18 分钟前
去哪儿网前端代码自动生成技术实践
前端·ai编程
前端九哥31 分钟前
装个依赖把公司电脑干报废了?npm i 到底背着我干了啥?
前端·javascript
溪海莘37 分钟前
React入门:跟读官方快速入门教程(前端小白)
前端·react.js·前端框架
绝世唐门三哥1 小时前
工具函数-精准判断美东交易时间
前端·javascript·vue.js
Moment1 小时前
如何一次性生成 60 种语气表达?RWKV 模型告诉你答案 ❗❗❗
前端·后端·aigc
踢球的打工仔1 小时前
typescript-null和undefined
前端·javascript·typescript
前端小蜗1 小时前
对不起,我很贱:老板还没催,我自己就统计《GitLab年度代码报告》
前端·javascript·人工智能