当前位置: 首页 > 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

相关文章:

  • 代码修改材质参数
  • 编写红绿起爆线指标(附带源码下载)
  • TortoiseSVN提示服务器凭证检核错误:站点名称不符
  • js 获取某日期到现在的时长 js 数字补齐2位
  • TCP/IP协议,TCP和UDP区别
  • 基于混合配准策略的多模态医学图像配准方法研究
  • 如何保护 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