› › Wrapping long words using CSS. How to add line breaks using CSS properties Force css wrapping

Wrapping long words using CSS. How to add line breaks using CSS properties Force css wrapping

The Internet is made up of content, content is made up of words, and words can be very, very long. And sooner or later the webmaster is faced with the problem of hyphenating long words. This problem is especially relevant for responsive design, and for small blocks of content. So how do you deal with this problem?

Hyphen

The first solution for hyphenating long words is to use a hyphen.

Defisi ( -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; )

Browser support: CSS hyphens are supported by almost all modern browsers, with the exception of Chrome, Opera, Android. Also, very often a hyphen is inserted in places that are grammatically incorrect.

Word break

Wordbreak is a CSS property that indicates whether lines should be broken within words.

Obriv-slova ( -ms-word-break: break-all; word-break: break-all; word-break: break-word; )

Browser support: Word breaks are supported in all browsers except Opera Mini and older versions of Opera.

Overflow wrapper

The next solution is to use an overflow-wrap.

Obertka-perepolneniya ( word-wrap: break-word; overflow-wrap: break-word; )

Browser support: Supported in almost all browsers. Note: Some browsers require the use of "word-wrap" instead of "overflow-wrap".

Ellipsis

Another option is to use ellipses.

Multigotochiye ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )

Browser support: Supported by all modern browsers.

This method works, but is far from ideal.

Final solution: Using the Overflow and Hyphen Wrapper.

Finalnoye-resheniye ( overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; hyphens: auto; )

This solution will allow a browser that supports it to insert a hyphen, and for browsers that do not support it to insert a line break.

Vlad Merzhevich

Unlike text in printing, hyphens are rarely used on a web page, since we are not strictly tied to the paper format. Sites can be viewed on different monitors, with different resolutions, in different operating systems and browsers. All this gives rise to such a combination of combinations that it is impossible to predict what the final text will look like for the user. Because of this, text is usually aligned to the left, and hyphens occur in entire words. But still, word hyphenation is necessary in some cases, for example, when long chemical or medical terms are used in narrow columns of a given width, for the sake of aesthetics. In HTML and CSS manual or automatic methods There aren't that many hyphens to add, so I'll list them all.

Using a tag

Tag introduced in HTML5 and creates word wrap when necessary. In those places where, according to the rules of the Russian language, hyphenation is allowed, we insert (example 1). If the entire word fits into the allotted width, this tag will not manifest itself in any way and we will not even know about its presence. If the word does not fit, the browser is at the location of the tag creates a transfer.

Example 1. Tag

Transfers

One twelfth class dreamer Anzhelika, after graduating from school, chose the profession of business produced driver prostrate.

Result this example shown in Fig. 1.

Rice. 1. Text with hyphens

Soft transfer

Application has a serious drawback - it is impossible to understand whether it is a hyphen in front of us or a separate word on another line. Because of this, the meaning of the sentence may be lost and it may be misunderstood. Hyphenations must be done according to the rules of typography, namely: add a hyphen at the end of the line. Soft hyphenation copes well with this; in the HTML code there is a special character for it - . It serves the same role as a tag - is not visible in regular text and moves the word to another line, while adding a hyphen (example 2).

Example 2: Soft transfer

Transfers

An eleventh-grade student, Angelica, after graduating from school, chose the profession of business driver.

The result of this example is shown in Fig. 2. Notice how much more aesthetically pleasing and clearer the text looks compared to the figure. 1.

Rice. 2. Text with hyphens

word-break property

To automate the process of creating hyphens, use the word-break property with the value break-all (example 3). You no longer have to add any symbols or tags to HTML; styles take care of everything.

Example 3. Using word-break

Transfers

Eleventh-grader Angelica chose the profession of office worker after graduating from school.

The result of this example is shown in Fig. 3. The rules for text hyphenation are not taken into account in this case, so words can be hyphenated in a very bizarre way.

Rice. 3. Text with hyphens

Of all the listed methods, “semi-manual” using - gives best result- the rules of the Russian language are observed, the text looks most aesthetically pleasing. Use it when there are long words in the text.

Hyphens property

And finally, the most powerful and convenient property for automatic adding hyphens - hyphens. Its action is based on the hyphenation dictionary built into the browser, so it gives the best result. Supported in IE10, Firefox, Android and iOS. Chrome and Opera do not support. For this to work, for the tag add the lang attribute with the value ru (example 4).

Example 4: Using hyphens

Transfers

Eleventh-grader Angelica chose the profession of office worker after graduating from school.

The result of this example is shown in Fig. 4.

Rice. 4. Text with hyphens

Prohibition of transfers

Often the opposite task arises - to prohibit hyphenations in places where they are unacceptable according to the rules of the language. For example, you cannot separate units of measurement from a number (10 ml), the designation of a year (54 BC), initials from a surname, break stable abbreviations (etc.), etc. To prevent the browser from adding hyphens at the space, it should be replaced by non-breaking space(example 5).

Example 5: Usage

Transfers

Lake at coordinates 70° 58′ 19″ N. w. 97° 24′ 5″ E. located in the Taimyr Dolgano-Nenets district of the Krasnoyarsk Territory of Russia.

In this example, to correctly write coordinates, we use , which does not allow text to be wrapped.

The white-space property specifies how to display spaces between words. Under normal circumstances, 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 text to 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 moved to the 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
Object.style.whiteSpace
Note
Browser Internet Explorer up to version 7.0 inclusive does not support pre-line and pre-wrap values.  For