DWWEB.RU
СКРИПТЫ

Перенос строк 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;

}

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

Привет мир - это тестовый текст в тестовом диве, блоке, который понадобился для того, чтобы проверить работу свойства для переноса слов и строк в случае необходимости! И нам потребуется для проверки переносов пару слов очень длинных например: достопримечательность рентгеноэлектрокардиографического
Не забудь !
Оставить комментарийCOMMENTS+
Всего комментариев : 1
BBcode
нажмите, чтобы загрузить аватар
Загрузить свой аватар(max ширина, высота = 100px) ( как это работает)

Закрыть
+ =
Подписаться
ava
2019/10/18 - 14:29 | Привет из СССР
Много чего интересного у Вас нашел! Спасибо! Продолжайте в том же духе!
Видео бы побольше!
И... регистрацию на сайте не нашел...
ava
+ =
Теги:
перенос строки cssперенос на новую строку csscss перенос на другую строкуcss перенос текста на новую строкуперенос на следующую строку cssперенос строки блока cssперенос слова на новую строку cssсделать перенос строки csscss перенос строки в divcss принудительный перенос строкперенос элемента на новую строку css

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2019