Wrapping long words using CSS. How to wrap words in CSS that do not fit into a block? Force css line break
Determine how to wrap long words:
- only where there is a dash, space or Enter (excl., non-breaking space and non-breaking hyphen ‑). A hyphen is written between parts of one word (for example, red-yellow), and a dash is written between words. "Soft hyphen" - appears only when a transfer is necessary. If the word goes beyond the parent, then
or transfers its part without a line. Mathematical expressions use a minus sign (for example, 5 − 2). Phone numbers display a digit bar (for example, +7 800 000‒00‒00). And all this is not the same familiar thing that is on the keyboard. - after any character.
- according to the rules of the Russian language with automatic application hyphen.
overflow-wrap
word-wrap
word-break
line-break
hyphens
our one thousand nine hundred and ninety nine kilogram has already been re-inspected lifter-bulldozer-loader
What is the difference between one property and another?
By default, long words are not hyphenated unless explicitly indicated by a hyphen, and begin on a new line.
In order to ignore dashes that are immediately visible to the eye, we add word-break: keep-all; .
To prevent the browser from paying attention to the soft hyphen, insert hyphens: none; .
If word wrapping is required, then word-wrap: break-word; I advise you to always use it, since it is understood by all browsers. It is different from word-break: break-all; , which takes precedence in that words that do not fit in the block start on a new line and the soft hyphen recommendation is taken into account.
At sharing word-break: break-all; with hyphens: auto; , the latter is ignored. hyphens: auto; Places any hyphens at its discretion. But in order for it to work, you need to indicate your language by specifying the lang="ru" attribute in the div.
Don't wrap words on another line
Let's say a menu item or button won't look good if it breaks apart. Therefore, their separation must be prohibited. To do this, all the above properties should be set to “default” mode and added. Click on and look at our training ground.
Control word wrapping with hyphens: auto;
Tetrahydropyranylcyclopentyltetrahydropyridopyridine
Hi all). I continue to write about various useful properties of the CSS language, which in one way or another can help with layout. And today I want to tell you how to wrap words in CSS if they don’t fit into their container. I'll show you everything with a real example.
Enable hyphenation for words that don’t fit
Let's say I have a block 100 pixels wide and I need to write some text in it. The text contains the word " self-extracting". This is how an archive happens, for example) But that’s not the point. The word is very long, it simply won’t fit into the width of the container. Let's write it in such a narrow block (100 pixels). What will happen?
As you can see, the poor word has crawled out of the container, well, it has nowhere to go, what can you do. And this is without indentation. So, this is where the word-wrap property comes to the rescue. Here's what you need to set to the block to enable word wrapping in it:
Word-wrap: break-word;
And to make it more convincing, you can also add internal padding. So, after applying the property, we see that words that are too long will be transferred letter by letter to another line. Moreover, even if the second line is not enough for the word, the rest of it will be transferred to the third, etc.
I would like to note that the property can be used without fear. First, it works great in browsers today. Secondly, it works smart. Namely, for all normal words there will be no hyphens; the entire words will be transferred to the next line, so readability will not be affected. You can see it in this screenshot.
When to use word-wrap
Actually, so far I see 2 use cases. The first is just for narrow blocks, where you are afraid that long words may unsightly stick out beyond the boundaries of the block. The second is when the designer intended the site title to be in several lines.
So, in this article we learned how to do word wrapping in css. That's all for me today. See you.
