'How can I prevent line breaks between words and punctuation in CSS or jQuery

I have some text in a paragraph. My problem is that when punctuation is at the end of a word, it can sometimes be wrapped to the next line. Like this:

This is the text
, This is a new line

Can I resolve this with CSS or jQuery?

javascriptjqueryhtmlcsswordpress


Solution 1:[1]

If you don't put a space between the word and the punctuation, and that it is wrapped anyway, you can use the white-space: nowrap; css instruction. Otherwise, if you need a space between the word and the punctuation, like before a ?, use the non-breaking space code. You can have it by typing alt + 0160 on your keyboard if you're using Windows. For more keyboard methods, read this.

I hope it will help.

Solution 2:[2]

Suppose your problem rise because of some space symbol located before comma, like ... text , This ... when it should be ... text, This ....

At least that is the only reason I can see. If you will take a look at this fiddle, you will find that text in third <p> is never wrapped like you mentioned. (you may need to choose different width for your browser. Example above works in Chrome, but for Firefox widths are little different)

So, simply ensure that you have no spaces between text and comma.

Solution 3:[3]

Replace the space before the punctuation by a non breaking space:

+----------------------------------------------------------------------+
| System/application      | Entry method                               |
|-------------------------|--------------------------------------------|
| macOS                   | ?+Space                                    |
| Microsoft Windows       | Alt+0160 or Alt+255 (does not always work) |
| Linux or Unix using X11 | Compose, Space, Space or AltGr+Space       |
+----------------------------------------------------------------------+

Completing this answer https://stackoverflow.com/a/15637588/1310605

source: https://en.wikipedia.org/wiki/Non-breaking_space#Keyboard_entry_methods

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ben C.
Solution 2 Viktor S.
Solution 3

Related Questions