Перенос слов : word-wrap

По нашему мнению : для простого и удобного чтения слова не должны рваться , лучше их начинать писать целыми с новой строки. Решаем проблему только через css.

Глобально настраиваем так :

word-wrap: break-word;  
-  чтобы не рвал слова и переносил целиком 

hyphens: auto;  будет вставлять дефисы , резать слова 
и переносить вторую часть на новую строку

Теперь встает вопрос - что делать с очень длинными словами ? Проблема проявляется при адаптации к мобильной версии сайта, когда длинное слово не помещается по всей ширине , но и рвать его нельзя, то есть оно будет как-то больше чем ширина экрана.

Для варианта css @media с небольшой шириной экрана делаем так :


overflow-wrap: break-word;
word-break : break-word; 


/*word-break: break-all;*/

То есть если у нас есть такая строка :

а бб ссс дддд ееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееееее жж ззззззззззззззззззззззззззззззззззззззззззззззззззззз

То на небольшой ширине страницы мы получим примерно такой результат или вот на картинке как выглядит :

фотка 1

hyphens нам не нужны