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>

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

相关推荐
小小小小宇1 分钟前
前端 Shadow DOM 全解析与应用
前端
万物更新_4 分钟前
vue框架
前端·javascript·vue.js·笔记
小小小小宇6 分钟前
前端 Web Workers 和 Service Workers 全解析与应用
前端
陆枫Larry22 分钟前
浏览器的 Reflow 和 Repaint 是什么?为什么要尽量避免它们?
前端
孜孜不倦不忘初心24 分钟前
mac安装nvm及问题记录
前端·node.js
Richar26 分钟前
Object.freeze()注意事项
前端·javascript
TA远方26 分钟前
【HTML】JavaScript Canvas 图像截取与保存完整指南
前端·javascript·html·canvas·截图·截取
Asize28 分钟前
JavaScript 数据类型解析:从 null 与 undefined 的迷思到栈堆内存真相
前端·javascript·面试
anyup31 分钟前
分享 5 套 uni-app 实用主题,一键适配暗黑模式
前端·uni-app·视觉设计
李白的天不白32 分钟前
vue3 ts 配置smartadmin相关配置
前端