When making layouts for webmasters, the question periodically arises: how will the text be transferred? In most cases, the browser can handle this task on its own. But sometimes this process has to be taken under control, especially when filling out long words and phrases that, if misplaced, lose their meaning.
Word-wrap property
In HTML, there is a special <br> tag to separate lines. But its too frequent use is considered bad form among developers and often indicates unprofessionalism. As proof, imagine that you have a logo and you want each letter to start on a new line:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> </title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <section id="logo-wrapper"> <p class="logo"><br><br><br><br><br><br></p> </section> </body> </html>
It turned out to be a cumbersome and ugly code, from which any developer will experience a cultural shock. And what if you want the desktop version of the logo to be horizontal and with a screen width of less than 550 pixels vertically? Therefore, to customize the appearance of elements, always use cascading style sheets. Especially with CSS tools, line wrapping is done in a more elegant way. In this case, there is no excessive markup, which only reduces the page loading speed.
The first property that you should turn to for text processing is word-wrap. It takes three values: normal, break-all and keep-all. You only need to remember break-all to work. Normal is the default, and it makes no sense to specify it. Keep-all means a line break 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 is not useful to you. Also, it is not supported by Safari browser and iOS mobile phones.
In order to assign the logo from the previous example using CSS to wrap each line of a letter, 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 so that there is enough space for only one letter. Word-wrap with a value of break-all tells the browser that the word needs to be wrapped each time on a new line. This property cannot be called indispensable. But it will come in handy when making small blocks with text, for example, fields for entering comments.
White-space property
A common mistake of novice web developers is to try to edit the text with spaces or pressing the Enter key, 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 as you need, and taking into account all the intervals.
In a CSS document, line breaks assigned using the white-space property can be configured to take into account spaces or pressing the Enter key. White-space with a pre-line value will make the browser see Enter in the text.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> body{ width: 100%; margin: 0; padding: 0; display: flex; justify-content: center; -ms-align-items: center; align-items: center; } #wrapper{ width: 60%; background: linear-gradient(to bottom, rgba(0,0,0,.1),rgba(0,0,0,.8)); } #wrapper p{ color: #FFF; padding: 10px; font: bold 16px Helvetica, sans-serif; white-space: pre-line; } </style> </head> <body> <section id="wrapper"> <p class="text-to-wrap"> "". </p> </section> </body> </html>
If you change the pre-line to pre-wrap in the CSS code, the line break will take into account spaces. Conversely, prohibit any wrapping by assigning the white-space property with the nowrap value 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 wrapping, the CSS property allows you to crop content when the container is full. It takes two values:
- clip - just cuts off the text;
- ellipsis - Adds an ellipsis.
#wrapper p{ color: #FFF; padding: 10px; font: bold 16px Helvetica, sans-serif; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
For the property to work, the element also needs to be assigned a ban on line breaks and overflow with the value hidden.