在较小的屏幕上，制作一个长长的按钮即可包装内容

Question

我有一个带有长标题或标签的按钮，所以它拉长了，看起来也不是最好的。在屏幕不适合的小屏幕上看起来特别糟糕。这是当前代码的样子：

export function MyComponent() {
  return (
     <section className="my-section">
        <a className="ant-btn ant-btn-primary" href="/somewhere">Button with a very long title or content within it</a>
     </section>
  )
}

.my-section > .ant-btn.ant-btn-primary {
  background-color: #f29544;
  border-color: #f29544;
  font-size: 20px;
  font-weight: 600;
  padding-bottom: 10px;
  margin: 0 0 10px 5px;
}

使用此CSS，当前外观如下：

现在，我希望它在内容变得过多时包装内容，并成为其中包含两行或更多行的“填充”按钮。我该怎么办？

我尝试添加white-space:pre-wrap，但这会中断行并使内容保留在按钮之外，因此还有更多内容，我不确定是什么。看起来像这样：

我也确实认为，即使在较大的屏幕上，将其作为带有两行的更胖按钮也可能会更好。我该怎么做呢？

谢谢！

Answer 1

使用<span> CSS规则将按钮内的文本拆分为两个单独的white-space: nowrap标签。

body {
  font-family: sans-serif;
}

span {
  white-space: nowrap;
}

button {
  background-color: #f29544;
  border-color: #f29544;
  font-size: 20px;
  font-weight: 600;
  padding-bottom: 10px;
  margin: 0 0 10px 5px;
}

<button>
<span>Text long long text</span> <span>long long text long long text</span>
</button>

在单独的窗口中运行此代码，然后尝试调整窗口大小/缩小窗口以观察行为。

Answer 2

更新的CSS：

.ant-btn.ant-btn-primary {
    background-color: #f29544;
    border-color: #f29544;
    font-size: 20px;
    font-weight: 600;
    padding: 10px 20px;
    margin: 0 0 10px 5px;
    display: inline-block;
    white-space: nowrap;
}

Answer 3

设置

white-space: normal
height: auto

似乎可以帮我解决问题。