Как установить разрыв в моем HTML-тексте в @media?

Question

У меня есть страница, на которой я хочу выровнять текст на мобильном телефоне, а также разделить текст и выровнять на рабочем столе.На данный момент с мобильным просмотром все в порядке, но текст отказывается от text-align: justify;, а с рабочим столом все в порядке, за исключением того, что я хочу разбить строку Adsler is a classified listings company established in 2018. на две равные части и затем оправдать

Html:

<div class="a"> A </h1></div><div class="boutus"> bout 
</div><div class="boutustext">Adsler is a classified 
listings company established in 2018.</div>

Страница: https://adsler.co.uk/about-adsler/

Answer 1

Шаг 1).Используйте <br> с таким классом, как <br class="mobile-br">

Установите, что между текстом, который вы хотите разделить:

<div class="boutustext">Adsler is a classified 
<br class="mobile-br">
listings company established in 2018.</div>

Шаг 2).скрыть <br> в медиа-запросе CSS для рабочего стола , используя:

.mobile-br {
display:none;
}

И для мобильного телефона:

.mobile-br{
display:block;
}

Answer 2

Есть несколько способов сделать это, у Маркуса есть один вариант, вот как я это сделаю.

Оберните две строки в промежутки.

код:

.boutustext {
  text-align: justify;
}

@media(max-width: 767px) {
  /*Or whatever your breakpoint is*/
  .boutustext span {
    display: block;
    text-align: justify;
  }
}

<div class="boutustext">
  <span>Adsler is a classified</span>
  <span>listings company established in 2018.</span>
</div>

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

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