Блог

Главная - Вопросы по программированию - Предотвращение разрывов строк в ярлыках в Boostrap?

Предотвращение разрывов строк в ярлыках в Boostrap?

#css #bootstrap-4

#css #bootstrap-4

Вопрос:

Я разработал форму с использованием Bootstrap, и мне нужно, чтобы форма правильно работала на разных устройствах. В одной части моей формы у меня есть три ввода в одной строке, что обычно работает нормально. Но когда я эмулирую разные устройства в браузере, я вижу, что метки разбиваются на две строки, когда ширина экрана сужается. Конечно, это имеет смысл, но мне нужно решение, чтобы предотвратить это. Возможно ли это? Я могу согласиться с тем, что ярлык / значок обрезан, но не разделен на несколько строк. Форма генерируется PHP, и метки могут различаться по длине.

Мой ожидаемый результат такой (на ярлыках будет значок сбоку):

введите описание изображения здесь

Но когда ширина экрана становится слишком узкой, это выглядит так:

введите описание изображения здесь

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

В приведенном ниже примере кода я увеличил ширину до 350 пикселей, чтобы проиллюстрировать проблему. При использовании ширины 400 пикселей или более это выглядит хорошо:

 <html>

<head>
  <title>Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src='https://kit.fontawesome.com/a076d05399.js'></script>
</head>

<body>
  <div class="container" style="max-width:350px">
    <form>
      <div class="form-row">
        <div class="col-4">
          <div class="form-group">
            <label for="input-1">First label <span class='fas fa-info-circle'></span>
                </label>
            <input id="input-1" class="form-control" name="input1" type="text">
          </div>
        </div>
        <div class="col-4">
          <div class="form-group">
            <label for="input-1">Second label <span class='fas fa-info-circle'></span></label>
            <input id="input-1" class="form-control" name="input2" type="text">
          </div>
        </div>
        <div class="col-4">
          <div class="form-group">
            <label for="input-1">Third label  <span class='fas fa-info-circle'></span></label>
            <input id="input-1" class="form-control" name="input3" type="text">
          </div>
        </div>
      </div>
    </form>
  </div>
</body>

</html>

Ответ №1:

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

Вот так:

 @media screen and (max-width: 350px) {
  .fa-info-circle {
    display: none;
  }
}

это скроет значок шириной 350 пикселей или меньше.

Ответ №2:

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

 label {
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis; 
}
Метки: