解決el-menu標題過長顯示不全問題
更新時間：2023年12月12日 09:54:34 作者：itCatface
本文主要介紹了如何解決el-menu標題過長顯示不全問題,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,感興趣的朋友們跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧
問題
期望
處理方式
\src\layout\components\Sidebar\index.vue 文件后添加CSS
<style scped>
/* 側(cè)欄導(dǎo)航菜單經(jīng)典 文字超長溢出問題 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;
}
/* 動態(tài)樣式 控制收起時icon圖標 */
.packUp .el-submenu__title .svg-icon {
margin-right: 0% !important;
}
</style>
到此這篇關(guān)于解決el-menu標題過長顯示不全問題的文章就介紹到這了,更多相關(guān)el-menu標題顯示不全內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了詳解vue填坑之解決部分瀏覽器不支持pushState方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
Vue3使用hooks函數(shù)實現(xiàn)代碼復(fù)用詳解
這篇文章主要介紹了Vue3使用hooks函數(shù)實現(xiàn)代碼復(fù)用詳解，Vue3的hook函數(shù)可以幫助我們提高代碼的復(fù)用性,?讓我們能在不同的組件中都利用hooks函數(shù)2022-06-06
這篇文章主要為大家介紹了Vue組件之間的數(shù)據(jù)共享，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要介紹了關(guān)于TypeScript的踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
VUE獲取Promise對象中PromiseResult中的數(shù)據(jù)(最新推薦)
如果想要在接口請求方法的外面拿到請求的結(jié)果,再做相關(guān)數(shù)據(jù)處理,往往我們拿到的卻是一個Promise對象,那么遇到這樣的問題如何解決呢,下面小編給大家?guī)砹薞UE?項目中?如何獲取Promise對象中的PromiseResult中的數(shù)據(jù)?,感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了Vue項目識別不到@別名問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
在Vue3中使用vue-qrcode庫實現(xiàn)二維碼生成的方法
在Vue3中實現(xiàn)二維碼生成需要使用第三方庫來處理生成二維碼的邏輯,常用的庫有 qrcode和 vue-qrcode,這篇文章主要介紹了在Vue3中使用vue-qrcode庫實現(xiàn)二維碼生成,需要的朋友可以參考下2023-12-12
Vue 中使用vue2-highcharts實現(xiàn)top功能的示例
下面小編就為大家分享一篇Vue 中使用vue2-highcharts實現(xiàn)top功能的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
element-ui中el-input只輸入數(shù)字(包括整數(shù)和小數(shù))
開發(fā)中有時候需要input只能輸入數(shù)字,下面這篇文章主要給大家介紹了關(guān)于element-ui中el-input只輸入數(shù)字(包括整數(shù)和小數(shù))的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
Vue組織架構(gòu)樹圖組件vue-org-tree的使用解析
這篇文章主要介紹了Vue組織架構(gòu)樹圖組件vue-org-tree的使用解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08