0

Вот заголовок h2 и при это разрешении переносится криво заголовок

Вот заголовок h2 и при это разрешении переносится криво заголовок Как сделать,чтобы при этом разрешении экрана,текст перенесся после "вопросы?" а не после слов "мы всегда на" Чтобы он был в две строки. "Остались вопросы? "Мы всегда на связи!"

2
  • 2
    Самое простое Остались вопросы? "Мы всегда на связи! 3 окт 2018 в 9:41
  • Благодарю) Думаю именно это и надо было) 3 окт 2018 в 11:45

2 ответа 2

2

Если использовать тэг <br />, но сделав его отображение при определенных условиях (см. медиа запросы). Т.е., используя вложенность CSS селекторов мы задаем, что внутри родителя при разрешении более "мобильного"
получает свойство display: none, при "мобильном" разрешении возвращаем его первоначальное свойство.

#header br {
  display: none;
}
@media (max-width: 400px) {
  #header br {
    display: initial;
  }
}
<div id="header">
 <h1>Это первая строка. <br /> Это вторая строка</h1>
</div>

2

h2 {
  text-align: center;
  white-space: pre-wrap;
}

.block__input {
  display: inline-block;
  border: 1px solid black;
  padding: 15px;
  margin: 0 auto;
  max-width: 665px;
  width: 100%;
}

input {
  display: block;
  padding: 5px;
  width: 300px;
}

.inputBlock {
  display: inline-block;
  margin-bottom: 15px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div class="container-fluid">
    <div class="block__input justify-content-center">
      <div class="row">
        <div class="col-md-12">
          <h2 class="br">Остались вопросы? Мы всегда на связи</h2>
          <div class="inputBlock">
            <input type="text">
            <input type="text">
            <input type="text">
          </div>

        </div>

      </div>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function() {
      var w = $(window).width();

      // console.log(w);

      if (w >= 320 && w <= 425) {

        var text = $(".br").text();
        text = text.replace('?', '?<br/>');
        $(".br").html(text);
      }
    });
  </script>

</body>

</html>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.