Dont allow a button to break without word

Question

Let's say you have a help text with a button like:

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

If you shrink the window size, at some point a line break happens, and the button ? is alone at the second line.

This is a short help text
(?)

So the UX Team said, the (?) button should't be alone at second line, instead the last word and button.

This is a short help
text (?)

Does anyone know how to solve it with regular CSS?

Because we are using React, I suggested to break the sentence, and create a non breakable part out of the last word and the button, however, it feels like an ugly hack, so we are looking for a clean CSS solution if possible.

UPDATE: Already found a solution here:

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

Not sure, but I think if you would change `button` to `a`, you should be able to use `white-space:nowrap;`. — domsson, Jul 11 '17 at 10:13
Is the text dynamic? Can you modify the markup? https://codepen.io/danield770/pen/ZymdMr — Danield, Jul 11 '17 at 10:35
Must a line-break occur? Would it look odd if you ensured no wrapping - https://codepen.io/danield770/pen/gRQNZP — Danield, Jul 11 '17 at 10:41
Or how about making the button grow when no space is available https://codepen.io/danield770/pen/mwQZoJ — Danield, Jul 11 '17 at 10:45

score 2 · Answer 1 · answered Jul 11 '17 at 10:58

2

See if you can put a <span> around the last word + the button, and set the <span> to { display: inline-block; }.

Demo:

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>

answered Jul 11 '17 at 10:58

Peter B

22,460
5
32
69

nice hack, adding `span` and `display: inline-block;` – bhv Jul 11 '17 at 11:07
Like I said in the original Post, the label text is dynamic, I am not going to split the sentence, However, if you update you answer with the technique from my own answer I accept it, thanks – webdeb Jul 11 '17 at 11:41
No, it is fine this way, so everyone can see what approaches there are, and I'd even recommend to Accept your own answer since that is your preferred solution. – Peter B Jul 11 '17 at 11:49
I would like to, but because I can accept it first after 2 days, I would prefer, to accept one from others, only add the other technique, so even like you said, people will see different approaches. – webdeb Jul 11 '17 at 13:16

Gokulakrishnan M · Answer 2 · 2017-07-11T10:24:27.767

0

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

set width for the concern div or any tag and use word-wrap:break-word;

edited Jul 11 '17 at 10:24

answered Jul 11 '17 at 10:14

Gokulakrishnan M

350
4
14

check the updated code its working....add display:inline-block with code......it work here is the codepen link https://codepen.io/mgkrish/pen/rwQEvd – Gokulakrishnan M Jul 11 '17 at 10:25
It is breaking with the word only because of the fixed `140px`. Try to change the width to something dynamic like `30%` and change the window size, it will break between the text and the button. – webdeb Jul 11 '17 at 10:34
do you want the text in two lines always? – Gokulakrishnan M Jul 11 '17 at 10:37

score 0 · Accepted Answer · answered Jul 11 '17 at 10:51

Finally found the answer here:

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

I had to wrap the button in a span, to make the browser think its still text and add white-space: nowrap; to the wrapping space.

The full markup:

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

Dont allow a button to break without word

3 Answers3