Making a piece of text non-breaking?

Question

say I have a piece of text like this

Hello I am some text Hello I am some text Hello I am some text Hello I am some text I do not wish to be broken on new lines

Consider the above paragraph. I want for the bolded part to not be broken across a new line if possible. As in, I want it to break if it would require a scrollbar or something, but not break if it is possible to insert a page-break before or after that piece of text so that it can fit on one line.

How is this possible? I have tried things like page-break-inside and such, but it doesn't seem to do anything in firefox.

Gauzy

Answer 1

Use the white-space property:

Hello I am some text Hello I am some text Hello I am some text
Hello I am some text <span class="nobr">I do not wish to be
broken on new lines</span>

with:

span.nobr { white-space: nowrap; }

Lipchitz

I considered that, but I figured it would cause an unnecessary scroll bar, but it doesn't. Thanks! – Gauzy

@Gauzy ...so you considered the solution yet you asked before even trying it? That's a big no-no here! :P – Mesosphere

@Mesosphere Stackoverflow 6 years ago was a lot different than now heh – Gauzy

The white-space property will not cause a horz-scroll bar if there are other points to break the line, e.g. two pieces of text and one or both cannot be broken. Very useful. – Cornerstone

Answer 2

Adding this for completeness:

If you do not want to use CSS, you could use <nobr>text with space</nobr> - reference here

For pure text blocks, i believe not-anymore-depricated html formatting tags like <i>, <b>, <nobr> and alike are valid for use. For content relating to the site structure use <em>, <strong> and <span class="">.

Scaliger

Btw. it is not and can not be depricated. see: https://mcmap.net/q/270993/-why-is-the-lt-nobr-gt-deprecated – Scaliger

nobr is not standard and white-space should be used instead according to developer.mozilla.org/nl/docs/Web/HTML/Element/nobr – Cornerstone

But white spaces don't prevent non-textual splitting (like phonetic notation, for instance), so <nobr> is a savior =] – Exocrine

Answer 3

bootstrap 4 has a class="text-nowrap"

more here https://getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow

Indaba