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 分钟前
uniapp纯css实现基础多选组件
前端·css·uni-app
遇事不決洛必達3 分钟前
AST反混淆脚本
javascript·爬虫·nodejs·ast·ob混淆
早點睡39010 分钟前
ReactNative项目OpenHarmony三方库集成实战:@react-native-community/slider
javascript·react native·react.js
踩着两条虫13 分钟前
VTJ.PRO 在线应用开发平台的代码生成与模板系统
前端·低代码·ai编程
早點睡39015 分钟前
ReactNative项目OpenHarmony三方库集成实战:react-native-progress
javascript·react native·react.js
前端小崽子18 分钟前
线上复制按钮失效?也许是这个原因
前端
张元清18 分钟前
React 滚动效果:告别第三方库
前端·javascript·面试
有志20 分钟前
Vue 学习总结(Java 后端工程师视角)
前端
踩着两条虫21 分钟前
VTJ.PRO 在线应用开发平台的DSL生命周期
前端·低代码·ai编程
我是伪码农22 分钟前
JS 复习
开发语言·前端·javascript