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>

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

相关推荐
前端_yu小白16 小时前
react常用优化手段
前端·javascript·react.js·性能优化·usecallback·usememo
攀登的牵牛花16 小时前
前端向架构突围系列 - 框架设计(六):解析接口职责的单一与隔离
前端·架构
涵涵(互关)16 小时前
JavaScript 对大整数(超过 2^53 - 1)的精度丢失问题
java·javascript·vue.js
开开心心_Every16 小时前
离线黑白照片上色工具:操作简单效果逼真
java·服务器·前端·学习·edge·c#·powerpoint
Mintopia17 小时前
🌌 信任是否会成为未来的货币?
前端·人工智能·aigc
fqbqrr17 小时前
2601C++,模块导出分类
前端·c++
浮游本尊17 小时前
React 18.x 学习计划 - 第十二天:企业级实践与进阶主题
学习·react.js·状态模式
lili-felicity17 小时前
React Native 鸿蒙跨平台开发:useColorScheme 自定义鸿蒙端深色模式的主题配色
react native·react.js·harmonyos
倚栏听风雨17 小时前
vscode 运用 ts 代码需要准备什么
前端
韩曙亮17 小时前
【Web APIs】浏览器本地存储 ① ( window.sessionStorage 本地存储 | window.localStorage 本地存储 )
服务器·前端·javascript·本地存储·localstorage·sessionstorage·web apis