Question

假设您有一个帮助文本，其中包含以下按钮：

<label>This is a short help text <button>(?)</button></label>

如果缩小窗口大小，在某些时候会发生换行，并且按钮?在第二行是单独的。

This is a short help text
(?)

所以UX团队说，(?)按钮不应该单独在第二行，而是最后一个单词和按钮。

This is a short help
text (?)

有没有人知道如何使用常规CSS解决它？

因为我们正在使用React，所以我建议打破句子，并在最后一个单词和按钮中创建一个不可破坏的部分，但是，这感觉就像一个丑陋的黑客，所以我们正在寻找一个干净的CSS解决方案，如果可能的。

更新：已在此处找到解决方案：

How can I use a non-breaking space before an inline-block-default element, such as a <button>?

Answer 1

看看你是否可以在最后一个单词+按钮周围添加en_stop = set(get_stop_words('en')) new_stop = {'newstopword'} en_stop = en_stop.union(new_stop)，并将<span>设置为<span>。

演示：

＆＃13;

{ display: inline-block; }

＆＃13;

div {
  border: dotted 1px black;
  margin-bottom: 3px;
}

label>span {
  display: inline-block;
}

＆＃13;

Answer 2

<body>
<label>This is a short help text <button>(?)</button></label>
</body>
<style>
label{
display:inline-block;
width:150px;
word-wrap:break-word;
}
</style>

设置关注div或任何标记的宽度并使用自动换行：打破字;

Answer 3

终于找到了答案：

How can I use a non-breaking space before an inline-block-default element, such as a <button>?

我必须在一个范围内包装按钮，以使浏览器认为它仍然是文本并将white-space: nowrap;添加到包装空间。

完整标记：

button {
  display: inline;
}
span {
  white-space: nowrap;
}
<label>This is a short text<span>&nbsp;<button>(?)</button></span><label>

不要让一个按钮无法破解

3 个答案: