这基本上是对Avoiding line wrapping unless necessary with CSS的更严格的后续。
我有一个与上一个问题非常相似的目标：
1.将<span>中的单词放在一起-更喜欢在<span>之前断开。
1.如果<span>的长度超过了它的容器的宽度，则允许在<span>内部使用换行符。
1.如果<span>足够短，它在开始的同一行上结束，则保留<span>之前的单词以及span，以及它之后的单词。
不过，我还有一个额外的要求：
1.如果<span>很长，必须在里面换行， 后面的 * 文本内容必须紧跟在<span>的最后一个字符之后。*
上一个问题的答案使用display: inline-block来确保span的单词保持在一起，除非它们必须中断。它足够远以满足上述三点，但在最后一点上失败了，因为-根据inline-block的性质-span现在占据了其最右边的全部空间.即使最右边的边缘只在前一行上被击中！
请看下面的演示：

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;
}

个字符
请注意，（第二个，青色）<span>后面的句点是如何被向下推到span * 下面的行的，因为即使span的最后一行在 Package 点之前结束，* <span>本身 * 也和整行一样宽。这两个span都使用display: inline-block样式，但只有较短的一个与下面的文本完全匹配。
我不知道有什么属性组合可以让文本在插入一个span中的wrap后很好地流动，而span中的单词是保持在一起的。看起来inline-block行就是不起作用，但我不知道还能在哪里查找。