• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Перенос слов и знаков с помощью CSS и HTML (Как можно перенести текст при помощи стилей CSS)
Перенос слов и знаков с помощью CSS и HTML
Kosten
Суббота, 06 Октября 2018 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44241
Награды: 70
Просмотрев на некоторых ресурсах вопросы, то заметил, что многие задают такой вопрос, который заключается в том, как можно перенести слова, что все выглядело корректно. Так как есть словосочетание где присутствует много знаков, что по этому это слово будет вылезать из каркаса или блока.

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

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

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



Как пример, все показано на изображение, также есть 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 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44241
Награды: 70
Здесь как в первом методе, перенос идет без знаков, просто ломая слова. Но все же выглядит все корректно и за каркас не один знак не выходит.



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)
Форум » Web-Раздел » Начинающему вебмастеру » Перенос слов и знаков с помощью CSS и HTML (Как можно перенести текст при помощи стилей CSS)
  • Страница 1 из 1
  • 1
Поиск: