Menu
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.
408
If you want to prevent the text from wrapping, you can apply white-space: nowrap; Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on its own line (in the code).
Use white-space: nowrap; or give that link more space by setting li 's width to greater values. I prevented line break in li items using display: inline; . Maybe this will also help others with similar problems. Its important to be careful with display: inline as it can have side effects.
How to Prevent Word Wrap on a Web Page: HTML Method. If you only have the one-off instance of two or more words that you want to force the browser to keep on a single line, the easiest way is to use the non-breaking space character, " ", to separate those words instead of a normal space.
The HTML <nobr> tag is used to instruct the browser not to break the specified text (such as the usual line wrap that occurs at the right edge of the browser window).
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; } 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="">.
26
bootstrap 4 has a class="text-nowrap"
more here https://getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
