Слово «Город» нарушает мой макет только в Safari

Question

Я обнаружил странное поведение в Safari и не могу понять, что происходит.

Моя раскладка в Chrome:

Но при просмотре в Safari я получаю следующее:

По какой-то странной причине часть <small class="text-muted">(required)</small> моего HTML была перенесена на новую строку.

Еще более странно, если я просто изменю одну букву в слове "Город", раскладка станет правильной.

Та же часть моей формы, но я буквально изменил одну вещь, и это то, что я изменил слово «Город», чтобы вместо этого сказать «Город»:

На самом деле мне кажется, что я могу использовать любое слово вместо «Город», но когда я использую слово «Город», ярлык внезапно занимает2 строки.Итак, в свете этого есть простое решение, которое состоит в том, чтобы просто использовать слово «Город» вместо слова «Город», но я все равно хотел бы знать, действительно ли это действительно странная ошибка или я пропускаючто-то.

Что здесь происходит?

Мне не удалось воссоздать эту проблему в инструменте фрагмента кода переполнения стека.

Яиспользуя Bootstrap 4, и часть HTML, которую я просматриваю, выглядит следующим образом:

<div class="form-row">
  <div class="form-group needs-validation col-sm-6 col-md-6">
    <label for="inputCity">City <small class="text-muted">(required)</small></label>
    <input type="text" class="form-control" id="inputCity" name="city" required>
    <div class="invalid-feedback">
      Please provide your city.
    </div>
  </div>
  <div class="form-group needs-validation col-sm-6 col-md-4">
    <label for="inputState">State <small class="text-muted">(required)</small></label>
    <input type="text" class="form-control" id="inputState" name="state" required
              autocomplete="address-level1">
    <div class="invalid-feedback">
      Please provide your state.
    </div>
  </div>
  <div class="form-group needs-validation col-5 col-sm-4 col-md-2">
    <label for="inputZip">Zip <small class="text-muted">(required)</small></label>
    <input type="text" class="form-control" id="inputZip" name="zip" required>
    <div class="invalid-feedback">
      Please provide your zip code.
    </div>
  </div>
</div>

РЕДАКТИРОВАТЬ В ответ на комментарии

@ Rdg Замена пробела на   действительно исправляет макет.Но почему это происходит только тогда, когда за ним следует слово «Город» и ничего больше (если я не проверил каждое слово в английском языке, может ли это быть как-то связано с точной шириной слова «Город»?)

@ Geuis Да, мне наконец-то удалось воссоздать это в codepen, похоже, проблема в шрифте, который я использую ("Raleway"), и точной ширине слова "City".https://codepen.io/Redtama/pen/RdRpqX

@ Richard Uie Я не уверен, что вы имеете в виду под substitute the HTML entity for uppercase "c," i.e., C, но в отношении обтекания, вызванного шириной, я могу заменить слово «город» чем-то гораздо более длинным и нетимеет место перенос.

Пример с более длинным текстом метки

Answer 1

Я бы порекомендовал добавить следующее к вашему CSS, чтобы текст стал встроенным элементом:

.text-muted {
  display: inline-block;
}