перенос текста “блоками”

246

20 апреля 2018, 12:47

делаю мобильную версию.

есть строка, которая выглядит вот так:

перенос - тегом br. это нормальный вид, но если телефон немного уже, то начинают переноситься слова, выглядит это вот так:

мне нужно что бы на втором скрине текст был в одну строку. если убрать br, то будет то что нужно, но тогда на широких экранах этот текст будет в одну строку, а не как на 1м скрине. при этом желательно без wbr или подобного, старые браузеры тоже должны это поддерживать.

как быть?

Answer 1

Никаких br wbr и прочего не применял вообще ..на всех экранах будет выглядеть одинаково ...

*{ 
  margin:0; 
  padding:0; 
} 
.post{ 
  padding:20px; 
} 
p{ 
  white-space:nowrap; 
} 
p{ 
 
  font-size:1.4em; 
  font-weight:900; 
  font-family:Helvetica; 
  width:45%; 
  margin:auto; 
} 
 
@media (max-width:560px){ 
  p{ 
font-size:1em; 
width:80%; 
  } 
}

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<div class="post"> 
  <p>Отправка результатов платежа 
    <p> 
      <p class="last"> по email</p> 
</div>