This is one word. By default, it is not broken into parts within a block.
First, the link to the specification .
Now my approximate translation:
In most writing systems, in the absence of explicit hyphenation, the soft hyphenation system works only on word boundaries. Many of these systems use spaces and punctuation to explicitly delimit words. The possibility of a soft transfer can be determined by these characteristics.
There are several ways to fix it:
Soft carry
It is best to tell browsers how to transfer long words without relying on automated tools. This can be done with a soft transfer.
You can use the mnemonic ­ ( ­ ) or enter alt + 0173 on the keyboard (dial the numbers one by one, without releasing alt ).
Attention: it is impossible to use more than 5 soft hyphens in one word.
Checked in the last beta Yandex.Browser.
.num-box { margin-top: 75px; /* для демонстрации */ position: relative; width: 80%; height: 20%; background-color: antiquewhite; padding: 5px; /* для демонстрации */ }
<div class="num-box"> eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee­eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee­eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee­eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee­eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee­eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee </div> eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee & shy; eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee & shy; eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee & shy; eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee <div class="num-box"> eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee­eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee­eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee­eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee­eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee­eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee </div>
Zero space
ZERO-WIDTH SPACE - shows places where you can break a line without adding a hyphen; its width is zero. It is used in languages in which there are no spaces. When aligning text in width, it can expand like any other space.
You can enter using ​ or .
Attention: it is impossible to use more than 5 spaces of zero length in one word.
Checked in the last beta Yandex.Browser.
.num-box { margin-top: 75px; /* для демонстрации */ position: relative; width: 80%; height: 20%; background-color: antiquewhite; padding: 5px; /* для демонстрации */ }
<div class="num-box"> eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee​eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee​eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee​eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee​eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee​eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee </div>
The <wbr> tells the browser where to wrap a line in the text, if the width of the parent element requires it.
Warning: it is not possible to use more than 5 <wbr> elements in one word.
Checked in the last beta Yandex.Browser.
.num-box { margin-top: 75px; /* для демонстрации */ position: relative; width: 80%; height: 20%; background-color: antiquewhite; padding: 5px; /* для демонстрации */ }
<div class="num-box"> eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee<wbr>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee<wbr>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee<wbr>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee<wbr>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee<wbr>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee </div> eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee <wbr> eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee <wbr> eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee <wbr> eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee <div class="num-box"> eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee<wbr>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee<wbr>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee<wbr>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee<wbr>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee<wbr>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee </div>
The word-wrap property indicates whether or not to word-wrap long words that do not fit in the specified area. This property is of a rough nature and gives an error when validating a document on CSS3.
break-word - Line break-word are added automatically to fit the word to the specified width of the block.
.num-box { margin-top: 75px; /* для демонстрации */ position: relative; width: 80%; height: 20%; background-color: antiquewhite; word-wrap: break-word; padding: 5px; /* для демонстрации */ }
<div class="num-box"> eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee </div>
The overflow property controls the display of the content of the block element if it doesn’t fit entirely and goes beyond the specified dimensions.
auto - Scroll bars are added only when needed.
.num-box { margin-top: 75px; /* для демонстрации */ position: relative; width: 80%; height: 20%; background-color: antiquewhite; overflow: auto; padding: 5px; /* для демонстрации */ }
<div class="num-box"> eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee </div>
When answering, information from answers to the question was used: " How to prevent long words from breaking my div? "
