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>

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

相关推荐
摘星编程几秒前
React Native for OpenHarmony 实战:PixelRatio 像素 ratio 处理
javascript·react native·react.js
林_xi3 分钟前
二次封装一个vue3签字板signature pad
前端·javascript·vue.js
弓.长.4 分钟前
基础入门 React Native 鸿蒙跨平台开发:PixelRatio 像素适配
react native·react.js·harmonyos
w***76557 分钟前
vue2和vue3的区别
前端·javascript·vue.js
n 55!w !1088 分钟前
静态网页作业
前端·css·css3
缘木之鱼8 分钟前
CTFshow __Web应用安全与防护 第一章
前端·安全·渗透·ctf·ctfshow
我是一只小青蛙8889 分钟前
Python文件组织:路径抽象到安全归档
java·服务器·前端
奔跑的web.13 分钟前
TypeScript 泛型完全指南:写法、四大应用场景与高级用法
前端·javascript·vue.js·typescript
SevgiliD14 分钟前
文本溢出省略并Tooltip组件在表单和表格内的使用
前端·javascript·vue.js
DEMO派19 分钟前
Web 视频录制方案解析,轻松实现录屏!
前端·javascript·音视频