During layout, webmasters periodically have a question: how will the text wrap? In most cases, the browser handles this task on its own. But sometimes this process has to be taken under control, especially when shaping long words and phrases that, if transferred incorrectly, lose their meaning.
word-wrap property
In HTML, there is a special tagto separate lines. 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:
Check word rewrite
L
o
r
o
t
up
The result is a cumbersome and ugly code, from which any developer will have a culture shock. And what if you want the logo to be displayed horizontally on the desktop version, but vertically if the screen width is less than 550 pixels? Therefore, forcustomizing the appearance of elements always use cascading style sheets. Moreover, with the help of CSS tools, line breaks are carried out in a more elegant way. This does not create redundant markup, which only reduces the speed of page loading.
The first property to access 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 there is no point in specifying it. Keep-all means to prevent line breaks in a CSS document. Designed specifically for Chinese, Japanese and Korean characters. So if you're not going to blog in any of those languages, you won't need the feature. It is also not supported by the Safari browser and iOS mobile phones.
To use CSS to assign a newline for each letter to the logo from the previous example, 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 value of break-all tells the browser to wrap the word on a new line each time. This property cannot be called irreplaceable. But it will come in handy when designing small blocks of text, such as comment fields.
The white-space property
A common mistake novice web developers make is trying to edit text with spaces or hitting the Enter key and then wondering why their efforts don't show up on the page. No matter how many times you press "Enter", the browser will ignore it. But there is a way to make it display the text the way you want it, and take all the spacing into account.
In a CSS document, line breaks assigned with the white-space property can be configured to respect spaces or hitting the Enter key. White-space with a value of pre-line will cause the browser to see Enter in the text.
Check for new words body{ width: 100%; margin: 0; padding: 0; display:flex; justify-content: center; -ms-align-items: center; align-items: center; } wrapper{ /Container element must be given a width!/ 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; }
After each word, I press the "Enter" key.
If you change pre-line to pre-wrap in the CSS code, the line will wrap with spaces included. And vice versa, disable any wrapping by assigning the white-space property to the text with the value nowrap:
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 the line break, the CSS propertyallows you to trim the content when the container is full. Takes two values:
- clip - simply clips the text;
- ellipsis - adds an ellipsis.
wrapper p{ color: FFF; padding: 10px font: bold 16px Helvetica, sans-serif; text-overflow: ellipsis;/Add an ellipsis/ white-space: nowrap; / Prevent line wrapping / overflow: hidden;/Hide everything that goes beyond the container/ }
In order for the property to work, the element must also be set to prevent line breaks and overflow with the value hidden.
