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>

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

相关推荐
syt_10132 分钟前
grid应用之响应式布局
前端·javascript·css
libolei4 分钟前
chrome浏览器安装axure插件
前端·chrome·chrome插件
黑臂麒麟12 分钟前
Electron&OpenHarmony 跨平台实战开发(一):electron-vite 与 Vue3 架构搭建指南
前端·javascript·electron·openharmony
少寒16 分钟前
深入理解JavaScript Promise:异步编程的基石
前端·javascript
tecwlcvi32318 分钟前
安卓版谷歌地图,Google地图高清版,谷歌地球,谷歌翻译,谷歌(Chrome)浏览器,手机版Edge,浏览器等安卓版浏览器下载
前端·chrome·edge
czlczl2002092519 分钟前
SpringBoot中web请求路径匹配的两种风格
java·前端·spring boot
2022.11.7始学前端26 分钟前
n8n第四节 表单触发器:让问卷提交自动触发企微消息推送
java·前端·数据库·n8n
m0_7400437326 分钟前
Axios 请求示例 res.data.data
前端·javascript·vue.js
程序员小寒28 分钟前
超详细的 EventLoop 解读及模拟实现
前端·javascript
冴羽30 分钟前
太好看了!3 个动漫变真人 Nano Banana Pro 提示词
前端·人工智能·aigc