Перенос строк css

2019/10/17 Марат 62 1 CSS |

После некоторого изучения темы переноса строк, переноса слов – пришел к выводу, что все плохо! Как обычно... wall ! Веб развивается, сейчас 2019 и проблема переноса не решена! Видимо перенести слово, строчку для браузера – это ахринительная проблема!

Мы не будем рассматривать какие-то свойства для переносов слов и строк, которыми невозможно пользоваться! Нам нужно такое свойство в стилях, чтобы можно было его поставить и вопрос был решён! Не буду же я каждое слово на своем сайте вставлять…тег, где может, возможно, когда-нибудь произойдет перенос…( &shy или <wbr>)

Перенос строки css : word-break: break-all.

Свойство word-break может иметь два варианта break-all, добавим это свойство к нашему классу и посмотрим, как данное свойство работает для переноса строк, слов.

.word_break {

width: 160px;

background: #f0f0f0;

border: 1px solid #333;

padding: 10px;

font-size: 18px;

word-break: break-all;

}

Результат применения word-break: break-all

Привет мир - это тестовый текст в тестовом диве, блоке, который понадобился для того, чтобы проверить работу свойства для переноса слов и строк в случае необходимости! И нам потребуется для проверки переносов пару слов очень длинных например: достопримечательность рентгеноэлектрокардиографического

Перенос строки css : word-break: break-word.

Word-break может принимать еще одно значение, которое нас интересует для перноса строк и слов на новую строку break-word

.word_break_2 {

width: 160px;

background: #f0f0f0;

border: 1px solid #333;

padding: 10px;

font-size: 18px;

word-break: break-word;

}

Результат применения word-break: break-word

Перенос строки css : overflow-wrap: break-word.

Еще одно свойство для переноса строки : overflow-wrap, со значением break-word которое существует для переноса строк и слов, в том случае, если слова заходят за пределы блока.

.word_break_3 {

width: 160px;

background: #f0f0f0;

border: 1px solid #333;

padding: 10px;

font-size: 18px;

overflow-wrap: break-word;

}