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

489
24 ноября 2016, 10:13

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

.num-box { 
  margin-top: 75px; 
  position: relative; 
  width: 80%; 
  height: 20%; 
  background-color: antiquewhite; 
}
<div class="num-box"> 
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee 
</div>

Пример на JSFiddle

Answer 1

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

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

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

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

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

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

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

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

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

Ввести можно используя &#8203; или &#x200B.

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

.num-box { 
  margin-top: 75px; /* для демонстрации */ 
  position: relative; 
  width: 80%; 
  height: 20%; 
  background-color: antiquewhite; 
  padding: 5px; /* для демонстрации */ 
}
<div class="num-box"> 
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee&#8203;eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee&#8203;eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee&#8203;eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee&#8203;eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee&#8203;eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee 
</div>

Элемент <wbr>

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

Внимание: невозможно использование более 5 элементов <wbr> в одном слове.
Проверено в последней бете 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>

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; /* для демонстрации */ 
}
<div class="num-box"> 
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee 
</div>

CSS-свойство overflow

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

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

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

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

Answer 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 по спецификации так называется */ 
}
<div class="num-box"> 
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee 
</div>

READ ALSO
Как в gulp работает слияние потоков (stream merge)
CSS

Как в gulp работает слияние потоков (stream merge)

Для процессинга CSS я использую gulp с autoprefixer и doIuse. Потребовалось добавить к стилям файл стороннего разработчика, причем так, чтобы он включался...

 520
Кастомный класс селекта для DateTimeType на Symfony 3
CSS

Кастомный класс селекта для DateTimeType на Symfony 3

Доброго всем времени суток. Я кастомизирую форму, сгенерированную автоматически с помощью генератора CRUD.

389
Задний фон подбивался под размеры
CSS

Задний фон подбивался под размеры

Всем доброго времени суток. На сайте есть "шапка",фон белый.

405
CSS 1. Как можно полностью обновить страницу. 2. Как выровнять текст вертикально?
CSS

CSS 1. Как можно полностью обновить страницу. 2. Как выровнять текст вертикально?

У вас на скриншотах css код, который потом в итоге на поздних этапах разработки загонит в вас не то, что в угол, а в бездну, из которой вы не сможете...

 366