elementui中el-radio-group内容过长溢出问题

鼠标悬停显示文字

复制代码
<template>  
  <el-radio-group  
    class="fixed-width-radio-group"  
    v-model="continueruleForm.category"  
    size="mini"  
    fill="#2f54eb"  
    color="#2f54eb"  
  >  
    <el-radio-button label="product" title="这是产品选项的提示信息">{{ $t('plan.chanTe') }}</el-radio-button>  
    <el-radio-button label="process" title="这是流程选项的提示信息">{{ $t('plan.guoTe') }}</el-radio-button>  
  </el-radio-group>  
</template>  
  
<style scoped>  
.fixed-width-radio-group {  
  width: 200px; /* 设置您想要的固定宽度 */  
  overflow: hidden; /* 隐藏超出容器的内容 */  
  white-space: nowrap; /* 防止内容换行 */  
  display: flex; /* 使用 flex 布局以便子元素(按钮)能够正确排列 */  
  align-items: center; /* 垂直居中 */  
  /* 注意:text-overflow: ellipsis; 在这里可能不适用,因为按钮本身有固定的最小宽度 */  
}  
  
/* 如果需要,还可以为 el-radio-button 添加样式,但通常不需要为了显示 title 而添加额外样式 */  
</style>
相关推荐
大翻哥哥12 分钟前
Python上下文管理器进阶指南:不仅仅是with语句
前端·javascript·python
IT_陈寒25 分钟前
React 性能优化必杀技:这5个Hook组合让你的应用提速50%!
前端·人工智能·后端
再吃一根胡萝卜40 分钟前
Git 强制推送指南:新手必读的「危险操作」解析
前端
诚实可靠王大锤1 小时前
react-native项目通过华为OBS预签名url实现前端直传
前端·react native·华为
Monly211 小时前
Vue:下拉框多选影响行高
前端·javascript·vue.js
是罐装可乐1 小时前
前端架构知识体系:Source Map 的用法和全面解析
前端·映射·前端架构·代码安全·源码地图·source-map
小桥风满袖1 小时前
极简三分钟ES6 - ES8中对象扩展
前端·javascript
代码的余温1 小时前
Web服务器VS应用服务器:核心差异解析
运维·服务器·前端
一涯1 小时前
日常小常识记录
前端
那一抹阳光多灿烂1 小时前
CSS 编码规范
前端·css