我如何在 Wix Studio 编辑器上的按钮中启用多行文本（特别是移动断点）

Question

如何在 Wix Studio Editor 中使按钮文本分成多行，同时确保在移动断点上正确显示？

Answer 1

一段时间以来，我一直在努力尝试在 Wix Studio 编辑器中将按钮内的文本分成多行。默认情况下，按钮文本往往保留在一行上，当您有较长的文本或需要特定格式时，这并不理想。

主要挑战：

最大的障碍之一是处理移动断点。在较小的屏幕上，按钮文本几乎无法适应可用空间，导致布局问题和糟糕的用户体验。

解决方案：

我向按钮组件添加了一个自定义类并应用了以下 CSS：

.multiline_button > span > span:first-of-type {
    overflow: visible;
    text-align: left;
    white-space: normal;
}

说明：

• .multiline_button： 这是我分配给按钮的自定义类。您可以将其命名为任何您喜欢的名称。
• > span > span： 此选择器的目标是第一个 span 元素，该元素是另一个 span 的子元素，而该元素本身就是按钮的直接子元素。这将深入到包含按钮文本的特定范围。你可以在发布后检查你的 DOM 来获取 重要：右侧元素，必须是__label范围，如果在文本之前使用图标，请使用最后类型选择器
• 溢出：可见：确保任何文本溢出都是可见的，而不是隐藏或剪切。
• text-align：左：将文本左对齐。您可以根据您的设计需求进行调整。
• white-space：normal：允许文本换行，这是打破文本的关键属性。

解决移动断点：

为了解决文本不适合较小屏幕的问题，我在 CSS 中定义了特定的断点规则。这允许在不同的屏幕尺寸下进行调整，确保按钮文本优雅地适应。

@media (max-width: 600px) {
    .multiline_button > span > span:first-of-type {
     [...]
    }
}

实施步骤：

1. 为您的按钮分配一个类：

• 在 Wix Studio 编辑器中，选择您的按钮。
• 转到属性面板并添加类名称，例如 multiline_button。

2. 添加自定义 CSS：

• 导航到您网站的 CSS 文件或编辑器中的自定义 CSS 部分。
• 粘贴上面提供的 CSS 代码。

3. 定义断点规则：

• 向 CSS 添加媒体查询以处理不同的屏幕尺寸。
• 在这些断点内调整样式，以确保在移动设备上实现最佳显示。

结果：

应用此CSS并设置断点规则后，按钮内的文本现在分成多行并适应不同的屏幕尺寸，您无需发布即可看到

最后的想法：

我希望这可以帮助任何面临同样挑战的人。处理响应式设计可能很棘手，但通过正确的 CSS 调整，您可以实现所需的效果。如果您有任何疑问或进一步的建议，请随时分享！