April 10, 2016

Hello everyone). I continue to write about various useful properties of the css language that can somehow help in layout. And today I want to tell you how to wrap words in css if they do not fit into your container. I'll show you everything with a real example.

Turn on hyphenation for words that don't fit

Let's say I have a block 100 pixels wide and I need to write some text into it. The word comes across in the text Self-extracting... This is an archive, for example) But not the point. The word is very long, it just won't fit in 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 crawled out of the container, well, he has nowhere to go, what can you do. And this is without indentation. So, here the word-wrap property comes to the rescue. Here's what you need to ask a block to enable word wrap in it:

Word-wrap: break-word;

And for persuasiveness, you can also add padding. So, after applying the property, we see that words that are too long will wrap word by letter to another line. Moreover, even if the second line is not enough for a word, the rest of it will be transferred to the third, etc.

I would like to point out that the property can be used safely. First, it works great in browsers today. Second, it works smartly. Namely, for all normal words there will be no hyphenation, the whole words will be transferred to the next line, so readability will not be impaired. 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 ugly crawl out of the block. The second is when the designer conceived so that the name of the site should be in several lines.

So, in this article, we learned how to do word wrap in css. That's all for me today. See you.

Lesson 5.

In this tutorial, we:
1. Let's learn how to make the html code more convenient and easy to read for us.
2. Let's analyze how to correctly carry out the wrapping of a text line.

We make the html code handy.

Now our code is clear and easy to read, since there is little text in it and there are practically no tags. When we create a more complex page, there will be many tags, so it will be difficult to find the one you need.

So that there is no mess from the tags, you need to initially arrange the tags and lines so that they are visually perceived easier. When the browser reads information from the html page, it doesn't care how many spaces or how many empty lines there are in the code.

I changed the text in the page code relative to the one we created, but it doesn't matter. The left and right pictures show the same code. Both options will be displayed by the browser on the monitor screen in exactly the same way. Agree, working with the code shown on the right will be much easier than with the one on the left.

The code we are looking at is very simple, but even now there is a noticeable difference in visual perception. There are no definite rules for "putting things in order", each master decides for himself how it is more convenient for him to work.

Html line break. The & ltbr & gt tag.

Pay attention to the picture. In the first version, the text is written in one line, in the second version in two lines.

The browser will display both options the same way. The text will be written on one line:

Why is this so, you ask? Indeed, in one of the codes, part of the text has been transferred to another line. It would be logical if in the browser some of the text would also be transferred to another line, but html has its own logic in this regard. If we make a line break in the html code, then for the browser it is equivalent to one space(like a normal space between words in the text). If we move part of the text not one line down, but 2 or 3 (any number), then the browser will still count this distance as one ordinary space between words and when displayed on the screen, the text will be written in one line.

& Ltbr & gt tag

When we got acquainted with tags in the third lesson, I mentioned that there are tags that do not require closing. Tag & ltbr & gt one of them, it serves for line breaks.
Let's apply it in code:

We have inserted a tag & ltbr & gt into our html code and now when the file is launched through the browser, part of the text will be transferred to the next line.
* Do not forget to save changes in Notepad (Ctrl + S) and refresh the page in the browser (F5).

During layout, publishers periodically have a question: how will the text transfer be carried out? In most cases, the browser handles this task on its own. But sometimes this process has to be taken under control, especially by designing long words and phrases that, if incorrectly hyphenated, lose their meaning.

Word-wrap property

In HTML, there is a special tag for separating strings
... But its too frequent use is considered bad form among developers and often indicates unprofessionalism. As proof, imagine you have a logo and want each letter to start on a new line:

The result is cumbersome and ugly code that will give any developer a culture shock. And what if you want the logo to be horizontal in the desktop version, and vertically when the screen is less than 550 pixels wide? Therefore, always use cascading style sheets to customize the appearance of elements. Moreover, with the help of CSS tools, line breaks are done in a more elegant way. At the same time, there is no redundant markup, which only slows down the page loading speed.

The first property to look at for word processing is word-wrap. Accepts three values: normal, break-all, and keep-all. You only need to remember break-all to work. Normal is the default, and there is no point in specifying it. Keep-all means that line breaks are not allowed in a CSS document. Designed specifically for Chinese, Japanese and Korean characters. Therefore, if you are not going to blog in any of these languages, the property will not be useful to you. It is also not supported by Safari browser and iOS mobile phones.

To assign a line break for each letter to the logo from the previous example using CSS, you need to write the following code:

P (font: bold 30px Helvetica, sans-serif; width: 25px; word-wrap: break-all;)

The width and size of the font is selected in such a way that there is enough space for only one letter. Word-wrap with a break-all value tells the browser to wrap the word on a new line each time. This property cannot be called irreplaceable. But it comes in handy when designing small blocks with text, for example, fields for entering comments.

White-space property

A common mistake for novice web developers is to try to edit text with spaces or press Enter, and then wonder why their efforts are not visible on the page. No matter how many times you hit Enter, the browser will ignore it. But there is a way to make it display the text the way you want it to, and taking all the spacing into account.

In a CSS document, line breaks assigned using the white-space property can be configured to take into account spaces or press Enter. White-space with the pre-line value will force the browser to see Enter in the text.

If you change pre-line to pre-wrap in your CSS code, line breaks will take into account whitespace. Conversely, disallow any hyphenation by setting the white-space property with the value nowrap to the text:

#wrapper p (color: #FFF; padding: 10px; font: bold 16px Helvetica, sans-serif; white-space: nowrap;)

Text-overflow

Another useful tool for working with text is text-overflow. In addition to line breaks, the CSS property allows content to be clipped when the container is full. It takes two values:

• clip - just cuts the text;
• ellipsis - adds ellipsis.

#wrapper p (color: #FFF; padding: 10px; font: bold 16px Helvetica, sans-serif; text-overflow: ellipsis; / * Add ellipsis * / white-space: nowrap; / * Disable line wrapping * / overflow: hidden; / * Hide everything outside the container * /)

For the property to work, the element must also be assigned line break and overflow with the value hidden.

There is often a need to add a new paragraph, but without a blank line, which is inserted by the paragraph tag

For some passages of text, the standard spacing used for paragraphs is simply inappropriate. These can be inscriptions under pictures and in tables, poems, quotes, footnotes and notes.

For forced line wrapping, a special tag is provided, the function of which is in its name br (break row - "to break a row, line"). Tag
html means that all content following it must start on a new line. If necessary, you can put several tags in a row to achieve the required spacing.

Tag
is not case sensitive and does not require an end tag because it is an empty element, but it is better to get in the habit of closing all tags. In XHTML, the break tag must be "tightly closed" with a backslash.

Break tag usage example