当前位置: 首页 > article >正文

react-markdown内容宽度溢出和换行不生效问题

情景复现:
宽度溢出
不换行

解决办法,添加样式进行限制

/* index.css */
.markdown-container {
  word-break: break-word; /* 强制长单词断行 */
  white-space: pre-wrap; /* 保留空白符序列,但是正常地进行换行 */
  overflow-wrap: break-word; /* 在长单词或 URL 地址内部进行换行 */
}
// tsx文件内
 <ReactMarkdown className={"markdown-container"} remarkPlugins={[remarkGfm]}>
 {text}
 </ReactMarkdown>

添加样式后,即可解决问题,如下图所示:
文字不会溢出


http://www.kler.cn/a/394152.html

相关文章:

  • 工作编码案例--UDP多播 和 本地套接字bind
  • Selenium实践总结
  • 前端Python应用指南(四)Django实战:创建一个简单的博客系统
  • AAAI-2024 | 大语言模型赋能导航决策!NavGPT:基于大模型显式推理的视觉语言导航
  • 《AI智能体》——魔搭工作流模式
  • git push origin HEAD:refs/for/分支名
  • 如何保护 Microsoft 网络免受中间人攻击
  • CAN通讯演示(U90-M24DR)
  • 关于番外篇-CSS3新增特性
  • Docker与Podman全面比较
  • 企业一站式管理系统odoo的研究——PLM插件的搭建
  • Flink CDC 源码解析--整体流程
  • 行业类别-智慧城市-子类别智能交通-细分类别自动驾驶技术-应用场景城市公共交通优化
  • 霞智科技Titan 810荣获TÜV南德欧盟CE-MD认证证书
  • C++入门基础知识149—【关于C++ 关系运算符重载】
  • Node-RED - 编辑器添加用户认证
  • 深度学习之其他常见的生成式模型
  • FairyGUI和Unity联动(入门篇)
  • 第四十章 Vue之使用ESLint修正代码规范
  • C/C++语言基础--C++模板与元编程系列六,C++元编程相关库的讲解与使用
  • 七次课掌握 Photoshop:形状和文字
  • HTTP 1.0、HTTP 1.1 和 HTTP 2.0 区别
  • 《物理学报》
  • jmeter常用配置元件介绍总结之线程组
  • MySQL 8.0特性-自增变量的持久化
  • linux系统网络设置之ssh和nfs