Hardware and software setup

home Programs
Programs

Force line break css. Word hyphenation

Vlad Merzhevich

Unlike text in the printing industry, hyphenation is rarely used on a web page, since we are not rigidly tied to the paper format. Sites can view on different monitors, with different resolutions, in different operating systems and browsers. All this generates such a combination of combinations that it is impossible to predict how the final text will look like for the user. Because of this, usually the text is left-aligned, and hyphenation occurs in whole words. But still, word wrapping 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 ways adding transfers is not so much, so I will list everything.

Tag usage

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

Example 1. Tag

Transfers

One superclass Anzhelika's daughter, after graduating from school, chose the profession of business prod driver threads.

Result this example shown in fig. one.

Rice. 1. Text with word wraps

Soft transfer

Application has a serious drawback - it is impossible to understand whether the transfer is in front of us or a single word on another line. Because of this, the meaning of the sentence can be lost and misunderstood. Transfers must be done according to the rules of typography, namely: add a hyphen at the end of the line. Soft hyphenation does a great job with this, in the HTML code there is a special character for it - . It performs the same role as the tag - is not visible in normal text and wraps the word to another line, while adding a hyphen (example 2).

Example 2: Soft Transfer

Transfers

Anzhelika, an eleventh grade student, after graduating from school, chose the profession of a business-manufacturer.

The result of this example is shown in Fig. 2. Notice how much more aesthetic and understandable the text began to look in comparison with fig. one.

Rice. 2. Text with word wraps

word-break property

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

Example 3: Using word-break

Transfers

Eleventh-grader Angelica, after graduating from school, chose the profession of a clerk.

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

Rice. 3. Text with word wraps

Of all the listed methods, "semi-manual" using - gives best result- the rules of the Russian language are observed, the text looks the 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 addition hyphens - hyphens. Its action is based on the built-in hyphenation dictionary in the browser, therefore 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, after graduating from school, chose the profession of a clerk.

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

Rice. 4. Text with word wraps

Transfer prohibition

Often there is also an inverse problem - to prohibit hyphenation in those places where, according to the rules of the language, they are unacceptable. For example, you cannot separate units of measurement from a number (10 ml), a year designation (54 BC), initials from a surname, break stable abbreviations (etc.), etc. To prevent the browser from adding hyphens at the space, its should be replaced with a non-breaking space (example 5).

Example 5 Usage

Transfers

Lake at coordinates 70° 58′ 19″ N. sh. 97° 24′ 5″ E located in the Taimyrsky Dolgano-Nenetsky District Krasnoyarsk Territory Russia.

In this example, for the correct writing of coordinates, is used, which does not allow text wrapping.

Determine how to hyphenate long words:

  1. only where there is a dash, space, or Enter (exc, non-breaking space and non-breaking hyphen -). Between parts of one word, a hyphen is written (for example, red-yellow), between words - a dash. "Soft hyphen" - appears only when a hyphenation is necessary. If the word is outside the scope of the parent, then or ​transfers part of it without a dash. Minus is used in mathematical expressions (for example, 5 − 2). Phone numbers display a numeric bar (for example, +7 800 000‒00‒00). And all this is not the familiar - that is on the keyboard.
  2. after any character.
  3. according to the rules of the Russian language with the automatic use of a hyphen.

overflow-wrap
word wrap
word-break
line-break
hyphens

our 1999-kilogram has already been re-examined bulldozer loader

lang="en"lang="en">our thousand nine hundred and ninety nine have already been re-examined - kg bulldozer loader

What is the difference between one property and another

By default, long words are not wrapped unless explicitly indicated by a hyphen, and begin with newline.

In order to ignore dashes that are immediately visible to the eye, we introduce word-break: keep-all; .

In order for the browser not to pay attention to the soft hyphen, we insert hyphens: none; .

If word wrapping is required, then word-wrap: break-word; I advise you to use it always, since it is understood by all browsers. It differs from word-break: break-all; , which takes precedence in that words that don't fit in the block start on a new line and respect the soft hyphen recommendation.

At sharing word-break: break-all; with hyphens: auto; , the latter is ignored. hyphens: auto; places any hyphens at your 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 doesn't look good if it falls apart. Therefore, it is necessary to prohibit their separation. Why all the above properties should be set to the "default" mode and add . Click on and look at our polygon.

Manage word wrapping when hyphens: auto;

Tetrahydropyranylcyclopentyltetrahydropyridopyridine

Tetrahydropypyridino you

Automatic clumsy word wrapping (without adding hyphens).

Interested property values:

  • break-all
    Automatic transfer all words, the text looks justified.
  • break-word (used on this site in headers)
    Wrap individual words that do not fit in the given block width.

Bright future. CSS property hyphens

The hyphenation rules are determined by a dictionary built into the browser. The property works in the presence of the lang attribute with the language code at the level of the entire document or its individual parts.

Interested values:

  • manual (used by default)
    Words are wrapped only in those places of the text where the special character ­ (soft wrap) or tag is added . Special characters are manually placed in the text, they are not visible in regular text, and if the word does not fit, the browser creates a hyphen at the location of the special character. The ­ special character adds a hyphen when wrapping a word (as taught at school), but no tag.
  • auto
    The browser adds hyphens automatically based on the built-in dictionary. So far, poor browser support, does not work in chrome (.
...

Program modeling is the process and art of creating computer programs using programming languages.

p ( hyphens: auto; )

Transfer prohibition

There is an inverse task - to prohibit transfers. For example, do not separate initials from surnames or units of measurement from values ​​(100 kg). To prevent the browser from adding hyphens, instead of the usual space, write a non-breaking space  

Also, the hyphens CSS property has a value of none when words are not hyphenated, even if there are soft hyphens in the text.

brief information

CSS versions

css 1 CSS 2 CSS 2.1 CSS 3

Description

The white-space property sets how to display spaces between words. Under normal circumstances, any number of spaces in HTML code will show as one on a web page. The exception is the tag 

Text placed in this container is displayed with all spaces as it was formatted by the user.  So white-space mimics how the tag works 
But unlike it, it does not change the font to monospace.


Syntax


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


Values
normal The text in the browser window is displayed as usual, line breaks are set automatically.  nowrap Spaces are ignored, line breaks in HTML code are ignored, all text is displayed on one line;  however, adding the tag 
wraps text on a new line.  pre The text is shown including all spaces and hyphens as they were added by the developer in the HTML code.  If the line is too long to 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 wrapped to the next line if it does not fit in the specified area.  pre-wrap All spaces and hyphens are preserved in the text, but if the width of the line does not fit into the specified area, the text will automatically wrap to the next line.  inherit Inherits the value of the parent. 
The effect of values ​​on the text is presented in Table.  one.


HTML5 CSS2.1 IE Cr Op Sa Fx

 

 
 
 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.  one.


Rice.  1. Applying the white-space property


Object Model


document.getElementById("elementID ").style.whiteSpace


Browsers


Browser Internet Explorer up to version 7.0 does not support pre-line , pre-wrap , and inherit values.  For