javascript - How can I prevent line breaks between words and punctuation in CSS or jQuery - Stack Overflow

admin管理员组

文章数量:1297120

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?

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?

• javascript
• jquery
• html
• css
• wordpress

Share Improve this question Follow asked Mar 26, 2013 at 12:41 tommywangtommywang 33911 gold badge55 silver badges99 bronze badges 4

• Can you post a JSfiddle of your situation? We can then test the oute based on that what you see. – user1467267 Commented Mar 26, 2013 at 12:43
• 2 I'm unable to replicate this issue in Chrome (which treats the ma as part of the word). Which browser are you using? – James Donnelly Commented Mar 26, 2013 at 12:43
• 1 Could try <span style="white-space: no-wrap;">text,</span> Though I've never encountered this problem, unless you're putting a space between the end of the word and the ma? – gaynorvader Commented Mar 26, 2013 at 12:44
• First you could do some replace(' ,',',',text); – Valky Commented Mar 26, 2013 at 12:46

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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.

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./a/15637588/1310605

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

Suppose your problem rise because of some space symbol located before ma, 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 ma.

本文标签： javascriptHow can I prevent line breaks between words and punctuation in CSS or jQueryStack Overflow