“城市”这个词只破坏了我在 Safari 中的布局

Question

我在 Safari 中发现了一个非常奇怪的行为，但我无法弄清楚发生了什么。

我在 Chrome 中查看的布局：

但在 Safari 中查看时，我得到以下信息：

由于某种奇怪的原因，我的 HTML 的 <small class="text-muted">(required)</small> 部分已被删除到新行。

更奇怪的是，如果我只改变“城市”这个词中的一个字母，布局就会变得正确。

表格的同一部分，但我确实改变了一件事，那就是我将“城市”这个词改为“Sity”：

实际上，我似乎可以使用任何单词来代替“City”，但是当我使用“City”一词时，标签突然占了 2 行。因此，鉴于此，有一个简单的解决方法，即只使用“城镇”这个词而不是“城市”这个词，但我仍然想知道这是否只是一个非常奇怪的错误，或者我是否错过了东西。

这到底是怎么回事？

我无法在堆栈溢出的代码 sn-p 工具中重现此问题。

我正在使用 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;
}