能否仅用CSS实现优先在句点后换行且不产生额外行？

You can add more team members. Together, you can collaborate on company tasks.

我希望这段文本优先在句点后换行，但如果强制在句点后换行会导致文本多出一行（比如容器宽度足够容纳整段文本时），则不采用该换行方式。排版效果示意如下：

请问是否可以仅通过CSS（不借助JavaScript）实现这个需求？如果可行，希望提供对应的CSS示例代码。

我自己尝试了用inline-block的方案，在部分屏幕宽度下效果符合预期，但在某些宽度下会产生不必要的额外行。以下是我的示例代码：

HTML #

<div id="with-inline-block-container">
  <h1>Inline-block: Yes</h1>
  <p id="with-inline-block" class="block">
    <span class="green">You can add more team members.</span>
    <span class="blue">Together, you can collaborate on company&nbsp;tasks.</span>
  </p>
</div>
<div id="without-inline-block-container">
  <h1>Inline-block: No</h1>
  <p id="without-inline-block">
    <span class="green">You can add more team members.</span>
    <span class="blue">Together, you can collaborate on company&nbsp;tasks.</span>
  </p>
</div>
<p><span id="fade-indicator">&nbsp;resized&nbsp;</span></p>

CSS #

body { font-size: 32px; font-family: Helvetica, sans-serif; }
h1 { font-size: 48px; }
p.block span { display: inline-block; }
.green { /*background-color: lightgreen;*/ }
.blue { /*background-color: lightblue;*/ }
#fade-indicator { color: white; }
.alert { background-color: red; }
.fadeout { background-color: initial; transition: 0.5s; }

JavaScript #

const withInlineBlock = document.getElementById('with-inline-block');
const withoutInlineBlock = document.getElementById('without-inline-block');
const withInlineBlockContainer = document.getElementById('with-inline-block-container');
const withoutInlineBlockContainer = document.getElementById('without-inline-block-container');
const fader = document.getElementById('fade-indicator');
let withInlineBlockHeight = 0;
let withoutInlineBlockHeight = 0;

window.addEventListener("resize", onResize);

function showBestVersion() {
  withInlineBlockContainer.style.display = "block";
  withoutInlineBlockContainer.style.display = "block";
  withInlineBlockHeight = withInlineBlock.clientHeight;
  withoutInlineBlockHeight = withoutInlineBlock.clientHeight;
  if (withInlineBlockHeight > withoutInlineBlockHeight) {
    withInlineBlockContainer.style.display = "none";
    withoutInlineBlockContainer.style.display = "block";
  } else {
    withInlineBlockContainer.style.display = "block";
    withoutInlineBlockContainer.style.display = "none";
  }
}

function onResize() {
  showBestVersion();
  // indicate resize
  fader.classList.remove('fadeout');
  fader.classList.add('alert');
  setTimeout(function() {
    fader.classList.add('fadeout');
  }, 500); // wait time in milliseconds before fading out
}

showBestVersion();

目前我通过JavaScript在视口调整大小时，对比使用和不使用inline-block的元素高度，自动选择显示更合适的版本（还通过 避免最后一个单词孤立），能达到预期效果，但我想确认是否必须依赖JavaScript，这个排版需求能否仅通过CSS实现。

我已经查阅过相关的Stack Overflow问题，但均未找到对应解决方案。

内容的提问来源于stack exchange，提问作者bjornte