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>

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

相关推荐
zadyd2 分钟前
Workflow or ReAct ?
前端·react.js·前端框架
北寻北爱2 小时前
vue2和vue3使用less和scss
前端·less·scss
IT_陈寒2 小时前
Redis性能提升3倍的5个冷门技巧,90%开发者都不知道!
前端·人工智能·后端
雨雨雨雨雨别下啦2 小时前
Vue案例——面经
前端·javascript·vue.js
oo121383 小时前
里程碑5 - 完成框架 npm 包抽象封装并发布
前端·npm
达拉3 小时前
我花了三天用AI写了个上一代前端构建工具
前端·前端工程化
bysking3 小时前
【31-Ai-Agent】ai-agent的核心实现细节-bysking
前端
从文处安3 小时前
「前端何去何从」(React教程)React 状态管理:从局部 State 到可扩展架构
前端·react.js
一拳不是超人3 小时前
Three.js一起学-如何通过官方例子高效学习 Three.js?手把手带你“抄”出一个3D动画
前端·webgl·three.js
椰子皮啊3 小时前
400行Node.js搞定mediasoup信令转换:一次跨语言"表白"实录
前端·架构