html - 防止 HTML 标签之间的中断，同时允许在其中一个标签内中断

Question

在这样的示例中，我想允许在跨度内换行，但要防止在跨度和 i 之间断开(假设它是一个图标或带有工具提示的东西)。 Commonly它是 suggested在外部元素上应用 white-space: nowrap 和在内部元素上应用 white-space: normal 将解决这个问题，但在我的测试中，它没有。我什至尝试在结束 span 和开始 i 之间放置一个  ，即使这样也不能可靠地工作(尽管我相信它确实在 codepen 之外工作；我认为它正在做一些我无法控制的格式化)。

<div class="outer nowrap">
  <span class="allow-wrap">
    The quick brown fox jumped over the lazy dog
  </span> <i>!</i>
</div>

查看示例:https://codepen.io/bussemac/pen/WjJrba

如果可能的话，我宁愿不必使用  ，因为它感觉很脆弱，而且团队中的其他开发人员可能很容易忘记这一点。包装元素不是问题；在我们将使用它的任何场景中，我们都有这样一个元素。

Answer 1

.outer {  
  width: 60px;
  background-color: #ccc;
}
.no-wrap {
  display: inline-block;
}

<div class="outer">
    1. The quick brown fox jumped over the lazy <span class="no-wrap">dog <i>!</i></span>
</div>

把最后一个词和感叹号放在一个span里，给它一个inline-block的显示。这将确保它与“dog”保持一致。