不要让按钮在没有文字的情况下中断答案

【问题标题】：Dont allow a button to break without word不要让按钮在没有文字的情况下中断
【发布时间】：2017-07-11 19:50:42
【问题描述】：

假设您有一个带有如下按钮的帮助文本：

<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，所以我建议打断句子，并从最后一个单词和按钮中创建一个不可破坏的部分，但是，这感觉就像一个丑陋的 hack，所以我们正在寻找一个干净的 CSS 解决方案，如果可能。

更新：已经在这里找到了解决方案：

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

【问题讨论】：

不确定，但我认为如果您将button 更改为a，您应该可以使用white-space:nowrap;。
文本是动态的吗？可以修改标记吗？ codepen.io/danield770/pen/ZymdMr
是的，文本是动态的
必须出现换行符吗？如果你确保没有包装会不会看起来很奇怪 - codepen.io/danield770/pen/gRQNZP
或者在没有可用空间的情况下让按钮变大如何codepen.io/danield770/pen/mwQZoJ

标签： html css

【解决方案1】：

看看你能不能在最后一个单词+按钮周围加上<span>，然后将<span>设置为{ display: inline-block; }。

演示：

div {
  border: dotted 1px black;
  margin-bottom: 3px;
}

label>span {
  display: inline-block;
}

<div style="width:160px">
  <label>This is a short help <span>text <button>(?)</button></span></label>
</div>
<div style="width:170px">
  <label>This is a short help <span>text <button>(?)</button></span></label>
</div>
<div style="width:180px">
  <label>This is a short help <span>text <button>(?)</button></span></label>
</div>
<div style="width:190px">
  <label>This is a short help <span>text <button>(?)</button></span></label>
</div>
<div style="width:200px">
  <label>This is a short help <span>text <button>(?)</button></span></label>
</div>

【讨论】：

不错的 hack，添加 span 和 display: inline-block;
就像我在原始帖子中所说的那样，标签文本是动态的，我不会拆分句子，但是，如果您使用我自己回答的技术更新您的回答，我接受它，谢谢
不，这样很好，所以每个人都可以看到有什么方法，我什至建议接受你自己的答案，因为这是你的首选解决方案。
我很想，但是因为我可以在2天后先接受它，所以我更愿意接受别人的一个，只添加另一个技术，所以即使像你说的那样，人们会看到不同的接近。

【解决方案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 或任何标签设置宽度并使用 word-wrap:break-word;

【讨论】：

检查更新后的代码是否正常工作......添加显示：带代码的内联块......这里的工作是codepen链接codepen.io/mgkrish/pen/rwQEvd
只是因为固定的140px，才打破了这个词。尝试将宽度更改为 30% 之类的动态内容并更改窗口大小，它会在文本和按钮之间中断。
你想要两行文本吗？

【解决方案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>

【讨论】：