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

2019/10/17 Марат 236 0 #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;

}

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

Вас может еще заинтересовать список тем : #CSS | Теги:
перенос строки css перенос на новую строку css css перенос на другую строку css перенос текста на новую строку перенос на следующую строку css перенос строки блока css перенос слова на новую строку css сделать перенос строки css css перенос строки в div css принудительный перенос строк перенос элемента на новую строку css