如何使用CSS修复可滚动表单内复选框换行断点异常的问题

直接修改两处CSS规则即可解决选项被截断换行的问题：

1. 给选项标签.fav-choice添加两个属性，保证每个选项作为整体排版，不会被拆分成两行
2. 优化滚动容器的溢出规则，避免出现不必要的横向滚动条

修改后的完整CSS代码如下：

.favForm-categories{
 overflow-y: auto; /* 仅内容超出高度时显示垂直滚动条，比原设置更友好 */
 overflow-x: hidden; /* 隐藏横向溢出，避免出现水平滚动条 */
 height: 20rem;
}

.fav-choice {
 display: inline-block; /* 新增：让标签作为不可拆分的整体参与排版 */
 white-space: nowrap; /* 新增：禁止标签内部的复选框和文字换行 */
 line-height: 3.3rem;
 margin: .1rem;
 color: white;
 padding: .5rem;
 width: fit-content;
 border: solid .1rem white;
 border-radius: var(--borderRadiusButton);
 background-color: var(--color2);
}

input[type='checkbox'] {
 appearance: none;
 background-color: white;
 margin: 0;
 margin-right: .5rem;
 color: white;
 width: 1rem;
 height: 1rem;
 border: .3rem solid white;
 border-radius: var(--borderRadiusButton);
}

input[type='checkbox']:checked {
 background-color: var(--color2);
}

原理解释 #

• 原本.fav-choice是默认的行内元素，容器宽度不足时会被从中间截断，导致同一个选项被拆成上下两行
• display: inline-block可以让标签保留行内元素的排布特性，同时作为一个完整块不被换行截断
• white-space: nowrap可以保证标签内部的复选框和文字不会自动换行，避免单个选项内部出现折行

如果想要选项排列更整齐，还可以给.favForm-categories添加padding: 0.5rem，避免选项贴紧容器边缘。

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