'CSS/HTML5 Avoid line break on things such as ":-)" [duplicate]
I have strings containing smileys using ascii characters such as :-) which I need to display on a web page.
It happens than when the smiley is just at the end of the line it might be split between two lines. I don't want this to happen. I always want the smiley to be displayed as a singular "word" (in that case, the whole smiley would be displayed on the second line).
Could someone please suggest a solution?
EDIT 1 & 2
As I mentioned in the comment, the idea here is that a collection of punctuation marks is NOT necessarily considered like a word... And that's actually the problem I was facing. So if I had "comment" at the end of my line, this word wouldn't be split but if you have ";.!,;:" then this would.
In addition the answer you point to do not suggest the solution word-break: keep-all which is the one I used. Thus I believe this complementary and different.
Solution 1:[1]
You actually probably want: word-wrap: break-word
Solution 2:[2]
You can try with white-space: nowrap
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
Other alternatives like old nowrap for tables described here Attribute 'nowrap' is considered outdated. A newer construct is recommended. What is it?
Solution 3:[3]
A simple white-space: nowrap should do the work.
Just wrap your smiley in a span with a class : .nowrap and declare the property to that class.
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 | bearfriend |
| Solution 2 | tanguy_k |
| Solution 3 | Baldráni |