Как настроить переносы на мобильном устройстве через тег br

Question

нашла в интернете макет, примерно сделал чтобы текст на пк смотрелся правильно, но когда тестирую на мобиле в 375px, мои отступы через тег br смотрятся не правильно. Как можно их отредактировать эти отступы, можно ли через медизапросы или полностью нужно переписать код через div и каждому элементу назначать свойства.

https://www.figma.com/file/5D9pDuLtS042hzaoN69Kd7/Free--Landing--Page-Template?node-id=0%3A1

.text_about_me {
  margin: 0 auto;
  max-width: 485.34px;
  max-height: 218px;
  font-size: 18px;
  line-height: 22px;
  text-align: center;
  color: #070707;
  font-weight: 400;
}

@media (max-width:500) {
  .text_about_me {
    width: auto;
    height: auto;
  }
}

<p class="text_about_me">Hi, I'm Denis – UX/UI designer from Minsk.
  <br> I'm interested in design and everything connected with it.
  <br><br><br> I'm studying at courses "Web and mobile design<br> interfaces" in IT-Academy.
  <br><br><br> Ready to implement excellent projects<br> with wonderful people.
</p>

Answer 1

лучше переверстать, обернуть контент в <div> и в нем уже использовать <p> с отступами, у последнего обнулять отступ. ваш вариант подходит для больших контентных страниц(например политика конфиденциальности), где клиент например сам заполняет поле и может ставит свои отступы, тогда клиента надо предупреждать, что в мобилке они будет таки е же. либо делать пустые блоки с модификаторами например .m4{padding-bottom: 4px} и вставлять див с этим классом, но обычно это применяют когда пишу библиотеку, тоже вариант, но очень плохой

Answer 2

Для начала следует понимать разницу между разрывом строки и переносом. <br> - это НЕ перенос. Ну да ладно.

Подумайте о расположении мест переносов. Например, разрывать название курса в данном случае некрасиво:

I'm studying at courses "Web and mobile design<br> interfaces" in IT-Academy.

первая строка на мобиле скорее всего будет разорвана тоже и результат будет как на вашем верхнем скриншоте. Лучше так:

I'm studying at courses<br> "Web and mobile design interfaces"<br> in IT-Academy.

С помощью CSS и медиазапросов вы легко можете убрать лишние разрывы - например, задав нужным тегам <br> какой-нибудь класс, и применив к нему стиль:

p.text_about_me br.myClass {
  display: contents;
}

Но лучше всего - так:

Вообще, разрывы строк там, где не требуется их жесткое и однозначное наличие - дурной тон. Для вашего случая лучше всего подходит нормальная верстка с абзацами, в которых можно задать части строк, которые разрывать не надо:

.text_about_me {
  margin: 0 auto;
  max-width: 375px;
  font-size: 18px;
  line-height: 22px;
  text-align: center;
  color: #070707;
  font-weight: 400;
  background: wheat;
}

.text_about_me p {
  background: pink;
}

.text_about_me p:not(.last) {
  margin-bottom: 2em;
}

.nobreak {
  white-space: nowrap;
}

<div class="text_about_me">
  <p>Hi, I'm Denis – UX/UI designer from Minsk.</p>
  <p>I'm interested in design and everything related to it.</p>
  <p>I'm studying at courses <span class="nobreak">"Web and mobile design interfaces"</span> in IT-Academy.</p>
  <p class="last">Ready to implement excellent projects <span class="nobreak">with wonderful people.</span></p>
</div>

П.С. Подумайте заодно над текстом. "I'm interested in design and everything connected with it." - плохо. Как минимум потому, что "connected with..." означает "связанный/соединенный с..." буквально - веревкой, проводами или болтами.

БЛОГ НА HUSL

Как настроить переносы на мобильном устройстве через тег br

Ответы (2 шт):