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>

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

相关推荐
夏河始溢3 分钟前
一八零、AG-UI:构建AI前端交互的统一协议
前端·人工智能·ui
m0_7408596214 分钟前
解决uniapp跳转页面警告:Extraneous non-props attributes ...
前端·javascript·uni-app
一行注释18 分钟前
ECharts柱状图横向展示与DataZoom滑动查看实现
开发语言·前端·javascript
踢球的打工仔31 分钟前
typescript-类的访问权限public、private、protected
前端·javascript·typescript
Ulyanov36 分钟前
Impress.js深度解析
开发语言·前端·javascript·css3·impress.js
编程大师哥1 小时前
JavaScript DOM
开发语言·javascript·ecmascript
我叫Double1 小时前
GeneralAdmin-3
前端·javascript·vue.js
Charlie_lll1 小时前
学习Three.js–太阳系星球自转公转
前端·three.js
json{shen:"jing"}1 小时前
10_自定义事件组件交互
开发语言·前端·javascript
Jinuss1 小时前
源码分析之React中scheduleUpdateOnFiber调度更新解析
前端·javascript·react.js