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>

将最后一个单词和感叹号放在一个范围内，并为其显示内联块。这将确保它与“狗”保持一致。

Answer 2

您可以将CSS中的图标添加为伪元素吗？

.outer {
  width: 60px;
  background-color: #ccc;
}

.inline-block {
  display: inline-block;
}

span::after {
  content: "!";
  position: absolute;
}

<div class="outer nowrap">
  <span class="allow-wrap">
    1. The quick brown fox jumped over the lazy dog
  </span>
</div>
<br />
<div class="outer nowrap">
  <span class="allow-wrap">
    2. The quick brown fox jumped over the lazy dog
  </span>
</div>
<br />
<div class="outer nowrap">
  <span class="allow-wrap">
    3. The quick brown fox jumped over the lazy dog
  </span>
</div>
<br />
<div class="outer nowrap">
  <span class="allow-wrap">
    4. The quick brown fox jumped over the lazy dog
  </span>
</div>

或保留当前标记，在图标上使用position: absolute ..

.outer {
  width: 60px;
  background-color: #ccc;
}

i {
  position: absolute;
}

<div class="outer nowrap">
  <span class="allow-wrap">
    1. The quick brown fox jumped over the lazy dog
  </span> <i>!</i>
</div>
<br />
<div class="outer nowrap">
  <span class="allow-wrap">
    2. The quick brown fox jumped over the lazy dog
  </span><i>!</i>
</div>
<br />
<div class="outer nowrap">
  <span class="allow-wrap">
    3. The quick brown fox jumped over the lazy dog
  </span><i class="inline-block">!</i>
</div>
<br />
<div class="outer nowrap">
  <span class="allow-wrap">
    4. The quick brown fox jumped over the lazy dog
  </span><i class="inline-block">!</i>
</div>

防止HTML标记之间的中断，同时允许在其中一个内部中断

2 个答案: