关于Element UI的Radio组件多选时换行显示问题，可通过以下方案解决：

一、文本换行核心方案

‌1. 强制文本换行‌
给.el-radio__label添加以下样式实现自动换行：

:deep(.el-radio__label) {
    
    
  white-space: normal;   /* 允许换行 */
  word-break: break-all; /* 允许单词内断行 */
  display: inline-block; /* 支持文本块级换行‌:ml-citation{ref="1,6" data="citationList"} */
}

‌2. 控制文本容器宽度‌
若换行后出现布局错位，可限制标签最大宽度：

:deep(.el-radio__label) {
    
    
  max-width: 300px;      /* 根据实际布局调整 */
  vertical-align: middle;/* 对齐优化‌:ml-citation{ref="1" data="citationList"} */
}

二、多选布局优化

‌1. 调整选项间距‌
若多个Radio选项换行后间距过大，修改容器样式：

.el-radio-group {
    
    
  line-height: 24px;     /* 控制行高‌:ml-citation{ref="2" data="citationList"} */
  .el-radio {
    
    
    margin-right: 15px; /* 调整横向间距 */
  }
}

2‌. 弹性布局支持‌
使用Flex布局实现自适应排列：

.el-radio-group {
    
    
  display: flex;
  flex-wrap: wrap;       /* 允许换行 */
  gap: 8px 15px;        /* 行列间距控制 */
}

三、特殊情况处理

‌1. 深层次样式穿透‌
若组件库版本较高导致样式失效，改用：

::v-deep(.el-radio__label) {
    
     /* Vue3+的穿透语法 */
  white-space: pre-wrap;
}

‌2. 超长单词处理‌
针对含URL等无空格文本的强制换行：

:deep(.el-radio__label) {
    
    
  overflow-wrap: break-word; /* 优先单词间断行‌:ml-citation{ref="6" data="citationList"} */
}

注‌：实际开发中需根据具体场景调整数值，建议通过浏览器开发者工具实时调试.el-radio相关DOM节点的盒模型参数。若出现全局样式污染，可通过给RadioGroup添加独立class限定作用域‌