Почему длинное слово выходит за границы блока?

#html #css

Почему контент выходит за пределы div'a num-box ?



.num-box {
  margin-top: 75px;
  position: relative;
  width: 80%;
  height: 20%;
  background-color: antiquewhite;
}

eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee





Пример на JSFiddle 
    

Ответы

Ответ 1

Это одно слово. По умолчанию оно не разбивается на части внутри блока.
Сначала ссылка на спецификацию.
Теперь мой примерный перевод:  


  В большинстве систем письменности при отсутствии явных переносов
  система мягких переносов срабатывает только на границах слов.   Многие
  из этих систем используют пробелы и знаки препинания, чтобы явно
  разграничить слова. Возможность мягкого переноса может быть определена
  по этим признакам.




Исправить можно несколькими способами:  

Мягкий перенос

Лучше всего указать браузерам, как переносить длинные слова, не полагаясь на автоматические
средства. Сделать это можно с помощью мягкого переноса.
Чтобы набрать его можно использовать мнемонику ­ (­) или ввести alt+0173
на клавиатуре (цифры набирать по одной, не отпуская alt).  

Внимание: невозможно использование более 5 мягких переносов в одном слове.
Проверено в последней бете Yandex.Browser.



.num-box {
  margin-top: 75px; /* для демонстрации */
  position: relative;
  width: 80%;
  height: 20%;
  background-color: antiquewhite;
  padding: 5px; /* для демонстрации */
}

eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee­eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee­eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee­eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee­eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee­eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee







Пробел с нулевой длиной


  ZERO-WIDTH SPACE — показывает места, в которых можно разрывать строку,
  не добавляя знак переноса; ширина его нулевая.   Применяется в языках,
  в которых пробелов нет. При выравнивании текста по ширине может
  расширяться, как и любой другой пробел.


Ввести можно используя ​ или ​.  

Внимание: невозможно использование более 5 пробелов нулевой длины в одном слове.
Проверено в последней бете Yandex.Browser.



.num-box {
  margin-top: 75px; /* для демонстрации */
  position: relative;
  width: 80%;
  height: 20%;
  background-color: antiquewhite;
  padding: 5px; /* для демонстрации */
}

eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee​eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee​eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee​eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee​eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee​eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee







Элемент 


  Тег  указывает браузеру место, где допускается делать перенос
  строки в тексте, если этого требует ширина родительского элемента.


Внимание: невозможно использование более 5 элементов  в одном слове.
Проверено в последней бете Yandex.Browser.



.num-box {
  margin-top: 75px; /* для демонстрации */
  position: relative;
  width: 80%;
  height: 20%;
  background-color: antiquewhite;
  padding: 5px; /* для демонстрации */
}

eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee







CSS-свойство word-wrap


  Свойство word-wrap указывает, переносить или нет длинные слова,
  которые не помещаются по ширине в заданную область. Данное свойство
  носит черновой характер и при валидации документа на CSS3 выдает
  ошибку.





  break-word — Перенос строк добавляется автоматически, чтобы слово
  поместилось в заданную ширину блока.  




.num-box {
  margin-top: 75px; /* для демонстрации */
  position: relative;
  width: 80%;
  height: 20%;
  background-color: antiquewhite;
  word-wrap: break-word;
  padding: 5px; /* для демонстрации */
}

eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee







CSS-свойство overflow


  Свойство overflow управляет отображением содержания блочного элемента,
  если оно целиком не помещается и выходит за область заданных размеров.





  auto — Полосы прокрутки добавляются только при необходимости.




.num-box {
  margin-top: 75px; /* для демонстрации */
  position: relative;
  width: 80%;
  height: 20%;
  background-color: antiquewhite;
  overflow: auto;
  padding: 5px; /* для демонстрации */
}

eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee





При ответе использована информация из ответов к вопросу: "How to prevent long words
from breaking my div?"


Ответ 2

.num-box {
  margin-top: 75px;
  position: relative;
  width: 80%;
  height: 20%;
  background-color: antiquewhite;
  /* word-break: break-word; /* webkit only */
  word-wrap: break-word;
  overflow-wrap: break-word; /* word-wrap по спецификации так называется */
}

eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee