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 分钟前
遇到 Git 提示大文件无法上传确实让人头疼
前端·github
一个处女座的程序猿O(∩_∩)O6 分钟前
现代前端开发的三大支柱:TypeScript、ESLint、Prettier 深度解析与完美协作
javascript·typescript
xiangxiongfly91524 分钟前
JavaScript 惰性函数
javascript·惰性函数
坚持学习前端日记26 分钟前
个人网站从零到盈利的成长策略
前端·程序人生
POLITE336 分钟前
Leetcode 76.最小覆盖子串 JavaScript (Day 6)
javascript·算法·leetcode
CamilleZJ39 分钟前
eslint+prettier
前端·eslint·工程化·prettier
web小白成长日记1 小时前
深入理解 React 中的 Props:组件通信的桥梁
前端·javascript·react.js
2501_946675641 小时前
Flutter与OpenHarmony打卡步进器组件
java·javascript·flutter
tjswk20081 小时前
在ios上动态插入元素的列表使用:last-child样式可能不能及时生效
前端
小小荧1 小时前
CSS 写 SQL 查询?后端慌了!
前端·sql