Css long line wrapping. How to wrap words in CSS that do not fit into a block? Enable hyphenation for words that don’t fit

💖 Do you like it? Share the link with your friends
0

Hello everyone and let's get started. Let's say we have the following text:

The government of the United Arab Emirates and the administration are concentrating in this city all the newest technologies based on the latest achievements of science and technology, trying to turn it into a city of the future, as if straight from the screen of some science fiction film. These technologies include robot cops, robot cars and the Hyperloop transport system, and in the near future, an automated flying taxi service will begin operating in Dubai. And in preparation for this event, an electric two-seater Volocopter aircraft with 18 rotors, which will be used as a taxi, made its first flight in automatic mode, they write...

Here we have some text with which we will now begin to work.

And the first property that we will consider is called word-break

word-break: normal | keep-all | break-all

We are mainly interested in two values ​​of this normal property - the default value and break-all, with the help of which we establish that word wrapping is carried out character by character. As for keep-all, this value is used to wrap words in Chinese, Japanese and Korean.

P( word-break: break-all;. )

Please note that after applying this style, all of our text is stretched to the full available width and hyphens are carried out not by words, but by characters. This property can be useful when we have a very long word that does not fit into the specified width. However, this creates a kind of inconvenience, since absolutely all words are transferred character by character, even those that fit into the given width.

Fortunately, there is a similar property that transfers only words that do not fit into characters. It's called overflow-wrap:

P( overflow-wrap: break-word; )

and after applying the break-word value, all of our text is transferred word by word, and words that do not fit into the specified width are transferred character by character. We can say the task is completed! In addition to the break-word value, this property accepts:

overflow-wrap: normal | break-word | inherit;

Now let's move on to a more advanced css property for word wrapping in text.

Let's consider the white-space property, with which we can imitate the operation of the pre tag without changing the text itself to monospace.

white-space: normal | nowrap | pre | pre-line | pre-wrap | inherit

Essentially, using this property, we only work with spaces in the text. For example, if we apply the following style to our text:

White-space: nowrap;

all line breaks will be ignored and our text will be displayed as one line.

White-space: pre;

If the value is pre, all line breaks will be similar to those in the source code. Moreover, if the text does not fit into the specified width, then it will not be transferred. If we want it to be transferred, then we need to specify the pre-line value.

If we want to take into account not only line breaks source code, but also spaces between words, then you need to specify:

White-space: pre-wrap;

That's basically all I wanted to tell you about word hyphenation using css. I hope this article was useful to you and you will use the knowledge gained more than once.

Well, I say goodbye to you. I wish you success and good luck! Bye!

Determine how to wrap long words:

  1. 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.
  2. after any character.
  3. according to the rules of the Russian language with automatic use of a 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

lang="ru"lang="ru">our one thousand nine hundred and ninety nine has already been re-inspected - kilogram uprooter-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.

When used together 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

Tetrahydropypyridino high

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 do css transfer words 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 be more convincing, you can also write padding(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.

The white-space property specifies how to display spaces between words. IN normal conditions Any number of spaces in HTML code appear as one on a web page. The exception is the element 

, the text placed in this container is output with all spaces, as it was formatted by the user.  So white-space simulates the work 
But unlike it, it does not change the font to monospace.
brief information
Designations

DescriptionExample

<тип>
Indicates the type of the value.<размер>


A && BThe values ​​must be output in the order specified.<размер> && <цвет>


A |  BIndicates that you need to select only one value from the proposed ones (A or B).normal |  small-caps

A ||  BEach value can be used independently or together with others in any order.width ||  count


Groups values.[ crop ||  cross ]

*
Repeat zero or more times.[,<время>]*


+
Repeat one or more times.<число>+


?
The specified type, word, or group is optional.inset?

(A, B)Repeat at least A, but no more than B times.<радиус>{1,4}


#
Repeat one or more times separated by commas.<время>#


×
 
Values
normal The text in the browser window is displayed as usual, line breaks are set automatically.  nowrap Spaces are not taken into account, line breaks in HTML code are ignored, all text is displayed on one line;  at the same time, adding 
wraps the text on a new line.  pre The text is shown taking into account all spaces and hyphens, as they were added by the developer in the HTML code.  If the line is too long and does not fit in the browser window, a horizontal scroll bar will be added.  pre-line Spaces are not taken into account in the text, the text is automatically transferred to next line, if it does not fit into the specified area.  pre-wrap All spaces and breaks are preserved in the text, but if the width of the line does not fit into the specified area, the text will automatically be wrapped to the next line.
The effect of values ​​on text is presented in table.  1.
Example


 
 
 white-space
 
 
 
 
Example

 

 
 
 Fermat's Last Theorem

 X n+Y n= Z n
where n is an integer > 2






 
 

 








The result of this example is shown in Fig.  1.
Rice.  1. Applying the white-space property
Object model
An object.style.whiteSpace
Note
Browser Internet Explorer up to version 7.0 inclusive does not support pre-line and pre-wrap values.  For