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>

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

相关推荐
yingyima13 小时前
踩坑亲历:一次因 JSON 格式问题导致的宕机,及工具救赎
前端
kyriewen13 小时前
我开发的 Chrome 扒图浏览器插件又更新了❗
前端·chrome·浏览器
程序员祥云13 小时前
Prompt项目说明文档
前端
一勺菠萝丶13 小时前
如何在 Linux 服务器上使用 Speedtest 官方 CLI 测试带宽(小白教程)
java·服务器·前端
DianSan_ERP13 小时前
京东订单接口集成中如何处理消费者敏感信息的安全与合规问题?
前端·数据库·后端·团队开发·运维开发
TEC_INO13 小时前
Linux50:ROCKX+RV1126视频流检测人脸
开发语言·前端·javascript
下载居13 小时前
Node.js(Javascript运行环境) 26.1
开发语言·javascript·node.js
Dragon Wu14 小时前
Taro v4.2.0 scss使用“@/xxx“的配置方法
前端·小程序·taro·scss
wordbaby14 小时前
如何封装一个生产级的 React Native 分页列表 Hook
前端·react native·react.js
小帅不太帅14 小时前
我做了两个工具,一个 7MB 的壳,一个会记住的壳
前端·app·产品