不要让按钮在没有单词的情况下中断
提问于 2017-07-11 02:08:58
假设您有一个具有如下按钮的帮助文本：
<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解决方案，如果可能的话。
更新:已经在这里找到了解决方案：
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-07-11 02:51:41
最后在这里找到了答案：
我必须在一个跨度内包装按钮，使浏览器认为它是静止的文本，并将white-space: nowrap;添加到包装空间中。
完整标记：
button {
display: inline;
}
span {
white-space: nowrap;
}
<label>This is a short text<span> <button>(?)</button></span><label>Stack Overflow用户
发布于 2017-07-11 02:58:02
看看是否可以在最后一个单词+按钮周围放置一个<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>
Stack Overflow用户
发布于 2017-07-11 02:14:49
<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或任何标签设置宽度，并使用单词包装:断字；
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45031528
复制相关文章
点击加载更多
腾讯云开发者
