home / iOS / Which attribute defines word wrapping. Wrapping long words with CSS. Enable hyphenation for words that don't fit
23.07.2020

Which attribute defines word wrapping. Wrapping long words with CSS. Enable hyphenation for words that don't fit

Vlad Merzhevich

Unlike text in printing, 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 - to understand whether the transference is in front of us or single word on another line, you can't. 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 value break-all (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 the 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

Quite often, the inverse problem also arises - 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 The village is located in the Taimyrsky Dolgano-Nenetsky District of the Krasnoyarsk Territory of Russia.

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

Hello). I continue to write about various useful properties of the css language, which in one way or another can help with layout. And today I want to tell you how to wrap words in css if they do not fit into their container. I will show you everything with a real example.

Enable hyphenation for words that don't fit

Let's say I have a block with a width of 100 pixels and I need to write some text in it. The text contains the word " self-extracting". This is the archive, for example) But that's not the point. The word is very long, it just won't fit into the container in width. Let's write it in such a narrow block (100 pixels). What will happen?

As you can see, the poor word has crawled out of the container, well, it has nowhere to go, what can you do. And this is without indents. So, here the word-wrap property comes to the rescue. Here's what you need to set the block to enable word wrapping in it:

Word-wrap: break-word;

And for persuasiveness, you can also prescribe internal indents (padding). So, after applying the property, we see that too long words will be spelled over to another line. Moreover, even if the second line is not enough for a word, then the rest of it will be transferred to the third, and so on.

I want to note that the property can be used without fear. First, today it works fine in browsers. Second, it works smart. Namely, for all normal words there will be no hyphens, the whole words will be transferred to the next line, so the readability will not be violated. You can see it on this screenshot.

When to use word-wrap

Actually, while I see 2 options for use. The first is just for narrow blocks, where you are afraid that long words can ugly crawl out of the block boundaries. The second is when the designer conceived so that the name of the site was in several lines.

So, in this article, we learned how to do word wrapping in css. That's all I have today. See you.

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 to be with a hyphen, and start on a new line.

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

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 element 

, text placed in this container is displayed with all spaces as it was formatted by the user.  So white-space mimics working 
But unlike it, it does not change the font to monospace.
brief information
Notation

DescriptionExample

<тип>
Specifies the type of the value.<размер>


A&&BThe values ​​must be output in the specified order.<размер> && <цвет>


A |  BIndicates that only one of the suggested values ​​(A or B) should be selected.normal |  small-caps

A ||  BEach value can be used on its own or in combination 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 ignored, line breaks in HTML code are ignored, all text is displayed on one line;  However, adding 
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 and does not fit in the browser window, it will be added horizontal bar scroll.  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.
The effect of values ​​on the text is presented in Table.  one.
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.  one.
Rice.  1. Applying the white-space property
Object Model
An object.style.whiteSpace
Note
Browser Internet Explorer up to and including version 7.0 does not support pre-line and pre-wrap values.  For