除非必要，否则避免换行，同时允许在换行元素的最后一行之后立即进行文本流

Question

这基本上是对 避免换行（除非 CSS 有必要）的更严格后续。

我的目标与上一个问题非常相似：

将
1. <span>

    中的单词放在一起 - 最好在 

   <span>

    之前中断。

如果
2. <span>

    太长，超出了其容器的宽度，请在 

   <span>

    内留出一个换行符。

如果
3. <span>

    足够短，以至于它在开始的同一行结束，请将 

   <span>

    之前的单词与跨度以及它之后的单词保留在一起。

但是，我还有一个额外的要求：

4. 如果<span>

   太长以至于必须在其中换行，则

   以下文本内容必须紧跟在<span>

   的最后一个字符之后。

上一个问题的答案使用

display: inline-block

 来确保跨度的单词保持在一起，除非它们必须分开。它足够远来满足上述三点，但在最后一点上失败了，因为 - 根据 

inline-block

 的性质 - 跨度现在占据了直到其最右边缘的整个空间......即使最右边缘只是击中上一行！

请参阅下面的演示：

p {
  max-width: 180px;
  background: #fee;
  border: 3px solid red;
  padding: 8px;
}

span:nth-of-type(1) {
  display: inline-block;
  background: yellow;
}

span:nth-of-type(2) {
  display: inline-block;
  background: cyan;
}

<p>Hello, world. This is <span>a nice long paragraph</span>, and I'm interested in <span>armadillos, aqueducts, chlorophyll and choreography</span>. Do some of these interest you?</p>

注意（第二个，青色）

<span>

之后的句点如何被推到跨度

下方的行，因为即使跨度的最后一行在换行点之前结束，<span>

本身

与整条线一样宽。这两个跨度都使用 display: inline-block

 进行样式设置，但只有较短的一个与以下文本完美契合。

我不知道有任何属性组合可以使文本在插入到跨度中的换行后很好地流动，否则该跨度的单词会保持在一起。看起来

inline-block

 行不起作用，但我不知道还能去哪里看。

Answer 1

这是一个相当粗略的解决方案，它

嵌套内联块元素越来越深，以便“后续”内容真正包含在其父范围内。 （样式或行为通过 <u>

 或其他标签来区分。）

p {
  max-width: 180px;
  background: #fee;
  border: 3px solid red;
  padding: 8px;
}

span {
  background: #4444;
  display: inline-block;
}

p > span > u {
  text-shadow: 0 0 2px lime;
}

p > span > span > u {
  text-shadow: 0 0 2px blue;
}

<p>Hello, world. This is <span><u>a nice long paragraph</u>, and I'm interested in <span><u>armadillos, aqueducts, chlorophyll and choreography</u>. Do some of these interest you?</span></p>

上面的

<span>

是透明的灰色，因此“较暗”的表示它嵌套得更深。 HTML 基本上有这样的结构：

<p>
  Blah blah blah...
  <span style="display: inline-block">
    <u>Some styled text which should stick together, unless a break is necessary</u>
    More content, la dee da
    <span style="display: inline-block">
      <u>More styled text sticking together</u>
      More content.
    </span>
  </span>
</p>

这是可行的（！），但是从作者

或 HTML 生成的角度来看（例如从 Markdown 或其他一些源文本进行转换），它几乎站不住脚。

我很想找到一种替代解决方案，它不太依赖于将标记破坏成不自然的嵌套形式。