Prevent line break between an inline element and period - html

Question

Here is an example.
As you can see, I made the <button> element inline (in fact, doesn't matter if it's inline or inline-block).
The issue is that on some certain container width, the "." goes to the next line by itself, which is weird.
Without the button element, "here" and "." goes to the next line together, which is the desired behavior.
I don't want to place an explicit line break before "here". It should be responsive. Meaning, if the container is wide enough, everything should go in one line.
I also don't want to put the "." inside the button because it should not be colored.
How do I solve this?

Answer 1

You can wrap the button and period in a container with white-space: nowrap:
<p >This section means lorem ipsum dolor sit amet. You can see the permissions <span style="white-space: nowrap;"><button>here</button>.</span></p>
(Although I would always use a class rather than in-line style in practice).

Answer 2

If you place the button and the period inside a new container with display: inline-block, the browser will prefer to keep them on the same line. Wrapping will occur before or after the new container as long as it's possible.

Answer 3

The most correct element to use would be an <a> element - since you are expecting the user to click it and then go to that location and see the result.
Since <a>'s are already inline elements - this will not affect your layout. You can style the a to look any way you want - but this is not the job of a button. It is always best to use the right tool for the job.
p{
font-size: 14px;
font-family: arial;
}
a {
color:red;
text-decoration: none;
}
<div>
<p>This section means lorem ipsum dolor sit amet. You can see the permissions here.</p>
</div>

Answer 4

Use pseudo class instead of having the "." as part of text itself. Here is the code that works
From your example, remove the "." from the HTML and add the button:after in the css
HTML:
<div style="width:508px">
<p >This section means lorem ipsum dolor sit amet. You can see the permissions <button>
here</button></p>
</div>
CSS:
p{
font-size: 14px;
font-family: arial;
}
button {
border: 0;
padding: 0;
font-size: 14px;
height: auto;
display: inline;
color: red;
}
button::after{
content:'.';
color: black;
}