修复变体 select 包装宽度 (SqSp)
Fix variant select wrapper width (SqSp)
在我的个人产品页面上，有下拉选择框显示我的产品的变体。因为一些变体有更长的描述，所以这个框变得更长。
在桌面网站上没问题，但在移动设备上，选择栏会超出页面边缘。这似乎干扰了我在页面顶部的移动菜单。
据我所知，我应该瞄准 'variant-select-wrapper' 但我环顾四周似乎无法找到缩短此框以使其适合移动显示器的方法。
有谁知道有效缩短或固定此框宽度的方法，还是我定位错误？
谢谢
以下 CSS 应该适合您，已添加到 Squarespace 中的 CSS 编辑器（如果您使用开发模式，则添加到您的 CSS 文件）。
.variant-option select {
max-width: 100%;
}
这将限制 select 框本身的宽度，使其不会超出其父项的宽度。这不会影响 select 框中选项的宽度，在 Windows 设备上，该框将继续扩展到父项（以及浏览器 window 之外）。但是，在 Android 和 iOS 上，选项将出现在类似模态的框中，文本选项被换行。我认为在这两种情况下都是可以接受的用户体验。
要在 Windows 设备上包装选项，需要 Javascript (Ref. 1, Ref. 2)，这就是为什么我认为这种简单的 CSS 方法是一个合理的折衷方案。
在我的个人产品页面上，有下拉选择框显示我的产品的变体。因为一些变体有更长的描述，所以这个框变得更长。 在桌面网站上没问题，但在移动设备上，选择栏会超出页面边缘。这似乎干扰了我在页面顶部的移动菜单。
据我所知，我应该瞄准 'variant-select-wrapper' 但我环顾四周似乎无法找到缩短此框以使其适合移动显示器的方法。
有谁知道有效缩短或固定此框宽度的方法，还是我定位错误？ 谢谢
以下 CSS 应该适合您，已添加到 Squarespace 中的 CSS 编辑器（如果您使用开发模式，则添加到您的 CSS 文件）。
.variant-option select {
max-width: 100%;
}
这将限制 select 框本身的宽度，使其不会超出其父项的宽度。这不会影响 select 框中选项的宽度，在 Windows 设备上，该框将继续扩展到父项（以及浏览器 window 之外）。但是，在 Android 和 iOS 上，选项将出现在类似模态的框中，文本选项被换行。我认为在这两种情况下都是可以接受的用户体验。
要在 Windows 设备上包装选项，需要 Javascript (Ref. 1, Ref. 2)，这就是为什么我认为这种简单的 CSS 方法是一个合理的折衷方案。