This question already has answers here:
Making a piece of text non-breaking?
(3 answers)
Closed 5 years ago.
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.
You actually probably want: word-wrap: break-word
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?
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.
Related
This question already has answers here:
Wrap text from bottom to top
(8 answers)
Closed 2 years ago.
Short & sweet question (which probably has been answered already, but I couldn't find it or figure out what keywords to Google for):
is there a way to achieve this (with CSS? Flexbox?)
If I have this scentence:
This is a long scentence and it needs to break.
It now (by default) breaks like this:
This is a long scentence and it
needs to break.
I would like it to break like this:
This is a long
scentence and it needs to break.
So: I would like to have 'the long bit' at the end, not at the beginning.
Is that possible? and if YES: how?
THX!
Unfortunately I don't think want you want to do is possible with vanilla CSS, and it makes sense if you think about it; It won't know where to make that first line break until it knows how many total lines there will be, and it doesn't know how many lines the text will take up until it renders them.
So to my understanding it would need to render the content twice, not just on load but also on resize, which could add to overhead.
A similar question:
Wrap text from bottom to top
Try this: <p> This is a long<br /> sentence and it needs to break. </p>
This question already has answers here:
Break long word with CSS
(6 answers)
Closed 3 years ago.
I am using an editor on my page and the word wrapping works fine if they are actually words. Meaning there is a space after every few characters.
However, if I put my finger on a letter and keep pressing, then the editor will expand beyond the edge of the display.
So I believe the following does the word wrapping showing an scrollbar if necessary:
<div style="overflow:scroll;">
But that won't work for the above scenario. Do I need a different attribute?
What am I doing wrong? Thank you.
I believe what you are looking for is the word-wrap attribute, specifically break-word, which allows a long word to be broken into sections to allow for wrapping. Try the following:
div {
overflow-wrap: break-word; // standard
word-wrap: break-word; // older, but still needed in IE
}
<div>
ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
</div>
You may also find some helpful information in this post and this post.
Please see the demo.
How come the li's do not wrap to the next line?
I'm not looking for a solution, because there are several and they work. But I'm wondering WHY it doesn't wrap.
Cannot find anything in the spec about it (or I don't see it).
This question is related to an answer I gave here.
There is no white space between them.
This sounds odd because the browser should be able to break between elements but you turned the elements into "words" using display: inline;. In this case, the browser "sees"
americaaustraliabannercabalcomputerfamilygeneralgwholsisraellastchaosmepeterpanphotospotbsPoTBSpsorforyzomtantratattoostemplatestravelweb_designwowmjboxquakeliveSpain_2011Sanatorio_de_Turberculososseverallsseveralls2bush_boake_allenodeon-colchestermoredartford
and it has no idea how to split this monster word.
Are there any disadvantages to using word-wrap:break-word in the following way?
body
{
word-wrap: break-word;
}
The descriptions of the values for this property are as follows:
normal: Break words only at allowed break points
break-word: Allows unbreakable words to be broken
Now, this only makes a difference in the breaking of unbreakable words (i.e. continuous strings that are longer than their containers). Otherwise, it'll make no difference for 99% of text anywhere.
So, are there any disadvantages to using this globally? It can certainly solve a lot of layout issues without (at least as far as I can see) having any adverse effects. It seems better to do this once than to have to apply it everywhere you could possibly have overflowing text that would mess up your layout.
I can't think of any disadvantages since, if you want to have some other kind of word-wrap elsewhere, you'll always be able to override this global style.
That said, if you can at all narrow down the situations in which this will be necessary, using a broad class would be preferable. There's no telling what rare but very frustrating bugs a global break-word style will cause (and in what browsers).
I can't see any advantages of making it global on a page if the page is anything other than a test page.
For me I would not want words that are unbreakable to break at all. It's easier to read when they are not broken up. However if you want to make your text fit a div without using text-align:justify; and leaving gaps in between letters or words it might be nice.
The reason why I said in other than a test page was because sometimes, when I wanted to use place holder text besides "lorum ipsum" I would type gibberish but the div would always stretch. But since I wouldn't be using that text on the live site, I probably wouldn't use it.
I think the only consideration would be support in IE8.
According to this, word-wrap: break-word; doesn't work in all scenarios.
This property applies to elements that have layout. An element has
layout when it is absolutely positioned, is a block element, or is an
inline element with a specified height or width.
Of course, this seems quite easily rectified, but it should be known in case you need to support IE8 and you intend to apply this to items that do not "have layout".
Interesting are the new CSS3 properties:
http://www.w3.org/TR/css3-text/#word-break
http://www.w3.org/TR/css3-text/#word-wrap
This question already has answers here:
How to word wrap text in HTML?
(20 answers)
Closed 7 years ago.
I have a fixed width div on my page that contains text. When I enter a long string of letters it overflows. I don't want to hide overflow I want to display the overflow on a new line, see below:
<div id="textbox" style="width:400px; height:200px;">
dfssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssfddddddddddddddddddddddsdffffffffffffffffsdffffffffffffffffdfssssssssssssdf
</div>
Is there anyway to disable overflow and put the overflowing text on a new line??? Twitter does something like this but I can't figure it out with CSS it's possible they are using Javascript.
Can anybody help with this??
Just add
white-space: initial;
to the text, a line text will come automatically in the next line.
word-wrap: break-word
But it's CSS3 - http://www.css3.com/css-word-wrap/.
Try the <wbr> tag - not as elegant as the word-wrap property that others suggested, but it's a working solution until all major browsers (read IE) implement CSS3.
Well, you can stick one or more "soft hyphens" () in your long unbroken strings. I doubt that old IE versions deal with that correctly, but what it's supposed to do is tell the browser about allowable word breaks that it can use if it has to.
Now, how exactly would you pick where to stuff those characters? That depends on the actual string and what it means, I guess.