Перенос слов и знаков с помощью CSS и HTML - Форум

Новые сообщения
Участники
Правила форума
Поиск
RSS

Страница 1 из 1
1

Перенос слов и знаков с помощью CSS и HTML (Как можно перенести текст при помощи стилей CSS)

Перенос слов и знаков с помощью CSS и HTML

Kosten

Суббота, 06 Октября 2018, 17:42 | Сообщение 1

Администраторы

Сообщений:44490

Награды: 70

« 557 »

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

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

Есть очень много методов, здесь рассмотрим один, который точно работает. Если длинное слово, то оно доходит до правой стороны, и здесь следующие буквы не выходят за грани, а просто начинают со следующей строки.

Приступаем к рассмотрению:

Как пример, все показано на изображение, также есть demo страница.

HTML

Код

<div class="perenos_slov">
Описание на сайте с рандомным текстом и
безусловноонооченьдлинноегдемногознаков
</div>

<div class="slovasogetanie">
Описание на сайте с рандомным текстом и
безусловноонооченьдлинноегдемногознаков
</div>

CSS

Код

.perenos_slov {
  width:100px;
  background-color:#87f991;
}

.slovasogetanie {
  width:100px;
  background-color:#9a9af9;

  white-space: pre-line;
  word-wrap: break-word;
}

Демонстрация

Прикрепления: 9328363.png (14.0 Kb)

Страна: (RU)

Kosten

Суббота, 06 Октября 2018, 17:59 | Сообщение 2

Администраторы

Сообщений:44490

Награды: 70

« 557 »

Здесь как в первом методе, перенос идет без знаков, просто ломая слова. Но все же выглядит все корректно и за каркас не один знак не выходит.

HTML

Код

<div class="uketupro-ductsaren">
Пишем самое длиииииииииннннннннооооооооооееее письмо, где нужно корректно перенести значение слов на следующие строчку на инет сайте.
</div>

CSS

Код

.uketupro-ductsaren {
    border:2px solid #245488;
    margin:18px auto;
    padding:8px;
    width:165px;
    word-break:break-all;
}

Демонстрация

Прикрепления: 9664498.png (6.2 Kb)

Страна: (RU)

Перенос слов и знаков с помощью CSS и HTML (Как можно перенести текст при помощи стилей CSS)

Страница 1 из 1
1