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>

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

相关推荐
用户6000718191017 分钟前
【翻译】用生成器实现可续充队列
前端
少云清20 分钟前
【UI自动化测试】4_web自动化测试 _元素定位(重点)
前端·web前端自动化
若丶相见27 分钟前
腾讯云完整部署方案:CODING + CI/CD + Docker + Nginx + K8s 扩展
前端·后端
比奇堡鱼贩1 小时前
python第五次作业
开发语言·前端·python
半兽先生1 小时前
使用 retire.js 自动检测前端 JavaScript 库漏洞
开发语言·前端·javascript
扶苏10022 小时前
详解Vue3的自定义 Hooks
前端·javascript·vue.js
二级小助手2 小时前
26年计算机二级web考试介绍【内附真题】
前端·计算机二级·全国计算机二级·web二级·二级web·前端二级·全国计算机web二级
专注VB编程开发20年3 小时前
WebView2 处理跨域访问限制,Frame脚本执行,难度比CEF大10倍
前端·javascript·.net
CHANG_THE_WORLD3 小时前
指针入门一
java·前端·网络
摸鱼仙人~3 小时前
主流前端「语言/技术 → 主流框架 → 组件库生态 → 适用场景」解析
前端