el-menu标题过长显示不全问题处理

项目基于vue-element-admin

问题

在这里插入图片描述

期望

在这里插入图片描述

处理方式

\src\layout\components\Sidebar\index.vue 文件后添加CSS

<style scped>
/* 侧栏导航菜单经典 文字超长溢出问题 CSS折行 */
.el-submenu__title {display: flex;align-items: center;
}
.el-submenu__title span {white-space: normal;word-break: break-all;line-height: 20px;flex: 1;padding-right: 20px;
}.el-menu-item {display: flex;align-items: center;padding-right: 20px !important;
}
.el-menu-item span {white-space: normal;word-break: break-all;line-height: 20px;flex: 1;
}
/* 动态样式 控制收起时icon图标 */
.packUp .el-submenu__title .svg-icon {margin-right: 0% !important;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/204331.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

5个免费实用的AI绘画软件,对新手极其友好!

分享5个实用的AI绘画软件&#xff0c;都可以免费使用&#xff0c;而且操作简单&#xff0c;对新手也比较友好&#xff0c;生成的图片也不错&#xff01; 1、AI-Chat 地址&#xff1a; https://mmm.aiyujiang.com 上传图片并输入AI提示词就能一键生成各类动漫、卡通风格头像&a…

一文让你知道企业真正需要一个怎样的远程协同运维平台?

随着企业业务的快速发展&#xff0c;各类系统也是越来越多&#xff0c;运维工作的作用也就越发突出&#xff0c;运维工作出现一点问题就会牵一发而动全身&#xff0c;所以企业需要一个远程协同运维平台。那企业真正需要一个怎样的远程协同运维平台呢&#xff1f;有空可以看看这…

多元线性回归(一)

基本概念 线性回归时机器学习中监督学习下的一种算法。回归问题主要关注是因变量&#xff08;需要预测的值&#xff0c;可以是一个也可以是多个&#xff09;和一个或多个值型的自变量&#xff08;预测变量&#xff09;之间的关系。 需要预测的值&#xff1a;即目标变量&#x…

Name or service not knownstname

Name or service not knownstname Hadoop 或 Spark 集群启动时 报错 Name or service not knownstname 原因时因为 workers 文件在windows 使用图形化工具打开过 操作系统类型不对引发的 在Linux系统上删除 workers 文件 使用 vim 重新编辑后分发即可

前端笔记(四)Flex 布局

标准流 标准流也叫文档流&#xff0c;指的是标签在页面中默认的派不规则&#xff0c;例如&#xff1a;块元素独占一行&#xff0c;行内元素可以一行显示多个。 但是很多的网页布局都是块元素在一行中显示的&#xff0c;这时候就需要浮动和 Flex 布局&#xff0c;浮动只需要了解…

Java 中的 Collection 容器

Java 中的 “容器” 在 Java 中&#xff0c;java.util.Collection 是一个接口&#xff0c;定义了一组常用的操作和方法&#xff0c;提供了一种方便的方式来管理和操作一组对象。 它是 Java 集合框架的基础之一&#xff0c;提供了统一的方式来处理对象的集合。 Collection 接口继…

OLED材料市场研究:预计2029年将达到1447亿元

由于技术优势突出&#xff0c;近年来OLED 率先在智能手机、可穿戴等中小尺寸领域的渗透率持续提升。OLED就是有机发光显示技术&#xff0c;其最大特点是每个像素独立自发光&#xff0c;具有非常完美的黑色显示能力&#xff0c;在亮度、色彩、响应速度等方面远胜LCD屏幕&#xf…

基于three.js生成动态波浪背景效果

文章目录 前言一、安装three二、新建waves.js文件三、引入waves.js文件比查看效果如有启发&#xff0c;可点赞收藏哟~ 前言 基于three.js生成动态波浪背景效果 一、安装three npm i three -S二、新建waves.js文件 注意geometry.setAttribute和geometry.addAttribute和在不同…

统计centos系统哪一个进程打开文件描述符

一&#xff1a;找出前10进程打开的描述符 # find /proc/ -print|grep -P /proc/\d/fd|awk -F/ {print $3}|uniq -c|sort -rn |awk {print "进程 "$2" 打开 "$1" 个文件描述符"}|head 二&#xff1a;通过进程id找出对应的进程运行的程序。 # ps…

一键AI智能改写,一键AI智能生成原创文章

在数字化时代&#xff0c;创作内容已经成为大家日常生活和工作中不可或缺的一部分。本文将深入探讨一键AI智能改写的概念&#xff0c;剖析其背后的技术原理&#xff0c;同时聚焦于147原创助手这一代表性工具&#xff0c;解读其在改写文案上的独特之处&#xff0c;以及在各大平台…

Java中实用的策略模式【Strategy】

一、简介 我们知道Java中有许多的设计模式&#xff0c;总共32个左右。常见的比如简单工厂、建造者、原型、代理、桥接等&#xff0c;这些设计模式相当于是一个规范&#xff0c;主要是总结出来便于大家理解开发的一种算法思路。 今天主要是给大家介绍一下我们常见的策略模式&a…

【ARM Coresight 系列 2 文章 -- Trace32 对 APBIC 地址的配置 介绍】

文章目录 APBIC RomtableAPBIC Romtable 图 1 APBIC 网络图 如上图所示,如果想通过Trace32/DS-5 去访问 AP, 这个时候需要怎么做呢?可以看到 APBIC 中ROMTABLE 中 APB-AP 的偏移是0x00200000,所以 APB-AP的基地址为 0x2b000000 + 0x00200000,又从 APB-AP 的romtable 中可以…

23款奔驰E350eL升级小柏林音响 13个扬声器 590w

小柏林之声音响是13个喇叭1个功放&#xff0c;功率是590W&#xff0c;对应普通音响来说&#xff0c;已经是上等了。像著名的哈曼卡顿音响&#xff0c;还是丹拿音响&#xff0c;或者是BOSE音响&#xff0c;论地位&#xff0c;论音质柏林之声也是名列前茅。 升级小柏林音响&#…

百元挂耳式蓝牙耳机有哪些?百元挂耳式蓝牙集锦分享

生活节奏匆忙&#xff0c;蓝牙耳机成了解救沉浸音乐迷的利器&#xff0c;而在百元预算内&#xff0c;挂耳式设计更是让你摆脱繁琐&#xff0c;本文将为你盘点几款百元挂耳式蓝牙耳机&#xff0c;让你在音乐和通话中轻松自如&#xff0c;让我们一起发现这些性价比爆棚的挂耳式蓝…

ElasticSearch篇---第五篇

系列文章目录 文章目录 系列文章目录前言一、什么是ElasticSearch?二、ElasticSearch中的集群、节点、索引、文档、类型是什么?三、ElasticSearch中的分片是什么?前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,…

宏工科技:电池装备高效交付“唯快不破”

面向TWh时代的锂电设备供应需求&#xff0c;锂电设备向标准化、模块化方向升级的趋势显现。 “近年来&#xff0c;宏工科技聚焦电池匀浆技术创新与规模化降本&#xff0c;通过电池匀浆工艺段的模块化探索与应用&#xff0c;从项目周期、成本、效率等多维度赋能电池前段制造高质…

理解意图,加速迈向L4高度自智网络

PART.1 自智背景 “云网自智”&#xff0c;目标未来&#xff01; 随着自智网络概念的兴起及各类相应概念、规范、指导原则的不断发布&#xff0c;运营商也越发关注系统的自智能力&#xff0c;TMF 的Autonomous Networks 自智网络框架规范设定了自智网络的级别及评价标准&#x…

Pandas教程09:DataFrame数据可视化绘制折线图、柱状图、散点图、直方图等

pandas.plot() 是 pandas 库中的一个非常方便的函数&#xff0c;用于绘制各种图形&#xff0c;例如线图、柱状图、散点图等。以下是一些示例用法&#xff1a; 1.绘制一个简单的线图&#xff1a; # Author : 小红牛 # 微信公众号&#xff1a;wdPython import pandas as pd impo…

2023年淘宝天猫年终惊喜红包玩法

2023年淘宝天猫年终惊喜红包玩法&#xff0c;2023年淘宝年终好价节红包活动 随着2023年的尾声渐近&#xff0c;淘宝再次为广大用户带来了年终的惊喜——一场特别的红包活动。从12月8日零时开始&#xff0c;直至12月12日的午夜&#xff0c;淘宝app将开启一个为期五天的年终好价节…

stateflow并行执行——并行状态与互斥状态

1.什么叫并行(Parallel:AND)和互斥(Exclusive:OR)状态&#xff1f; &#xff1a;在parent chart中有多个child chart可以同时运行&#xff1b;在parent chart的多个child chart可以只能运行一个。 2.如何设置并行或互斥状态&#xff1f; &#xff1a;右键parent chart&#…