调整页面尺寸时RadioButtonList单选按钮与文本拆分为两行如何修复

解决方法 #

问题根源是默认行内元素的换行规则：当容器宽度不足时，<label> 会作为整体换行到单选按钮下方。只需添加如下CSS样式即可修复，无需修改原有ASP.NET控件代码：

/* 针对RadioButtonList渲染出的td单元格设置弹性布局 */
.radioBL td {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 4px 0;
}

/* 单选按钮固定不收缩，保证始终在最左侧 */
.radioBL input[type="radio"] {
  flex-shrink: 0;
  margin: 2px 0 0 0;
}

/* 文本标签占满剩余宽度，长文本内部自动换行 */
.radioBL label {
  flex: 1;
  word-break: break-word;
  line-height: 1.5;
}

样式说明 #

• 弹性布局会将同个单元格内的单选按钮和文本固定为左右两部分，不会出现整体换行拆分
• flex-shrink:0 保证单选按钮永远不会被压缩，固定占据左侧位置
• 文本部分仅会在自身容器内换行，首行始终和单选按钮保持对齐
• 兼容所有现代浏览器，无需调整原有控件的属性配置

如果需要兼容IE9及更早版本，可以替换为浮动实现：

.radioBL input[type="radio"] {
  float: left;
  margin: 2px 10px 0 0;
}
.radioBL label {
  display: block;
  margin-left: 25px;
  word-break: break-word;
  line-height: 1.5;
}

内容的提问来源于stack exchange，提问作者rimi