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>

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

相关推荐
AAA简单玩转程序设计5 分钟前
救命!HTML按钮点了没反应?3分钟学会给网页“装脑子”
javascript·html
Cache技术分享6 分钟前
231. Java 集合 - 将集合元素转换为数组
前端·后端
神秘的猪头8 分钟前
浏览器是如何渲染 HTML/CSS/JS 页面的?——从代码到像素的完整流程
前端·javascript
啷咯哩咯啷13 分钟前
el-table-v2 实现自适应列宽
前端·javascript·vue.js
3秒一个大13 分钟前
JavaScript 中 var、let 和 const 的区别与应用
javascript
jump68014 分钟前
为什么typeof null = 'object'
前端
__不想说话__15 分钟前
给网站做“体检”:Lighthouse如何平息产品经理的怒火
前端·google·架构
玉宇夕落17 分钟前
🚀 从 HTML 到像素:浏览器渲染全流程揭秘(附性能优化实战)
前端·dom
西甲甲19 分钟前
chromium UI 简要解析
前端
inx17720 分钟前
微信小程序开发实战:从结构到数据绑定的完整实现
javascript·微信小程序