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>

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

相关推荐
一颗青果10 分钟前
Cookie 与 Session 超详细讲解
服务器·前端·github
zs宝来了17 分钟前
React 18 并发模式:Fiber 架构与时间切片
前端·javascript·框架
万物得其道者成27 分钟前
Vue3 使用 Notification 浏览器通知,解决页面关闭后旧通知点击无法跳转问题
前端·vue.js·edge浏览器
ShineWinsu30 分钟前
CSS 技术文章
前端·css
天若有情67340 分钟前
反向封神!C++ 全局单例不避反用,实现无锁多线程函数独占访问
java·javascript·c++
张风捷特烈41 分钟前
状态管理大乱斗#02 | Bloc 源码全面评析
android·前端·flutter
将心ONE1 小时前
pathlib Path函数的使用
java·linux·前端
lingzhilab1 小时前
零知派——ESP32-S3 AI 小智 使用 Preferences NVS 实现Web配网持久化
前端
阿亮爱学代码1 小时前
日期与滚动视图
java·前端·scrollview
欧米欧1 小时前
STRING的底层实现
前端·c++·算法