我知道你要求一个CSS解决方案，但我不认为有一个。下面是我的JS解决方案。

function createBetterLineBreaks(el) {
  var originalWidth = el.offsetWidth;
  var originalHeight = el.offsetHeight;
  for (let i = originalWidth - 1; i >= 0; i--) {
    el.style.width = `${i}px`;
    if (el.offsetHeight > originalHeight) {
      el.style.width = `${i + 1}px`;
      break;
    }
  }
}
// hover effects
document.querySelector('.box').addEventListener('mouseenter', function() {
  createBetterLineBreaks(document.querySelector('.box .text'));
});
document.querySelector('.box').addEventListener('mouseleave', function() {
  document.querySelector('.box .text').style.width = 'unset';
});

.box {
  width: 300px;
  font-size: 30px;
  border: 1px solid black;
  border-radius: 5px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="box"><span class="text">hover this box to distribute the text more evenly</span></div>

您正在寻找CSS Text Module 4属性text-wrap: balance。它已经被提出，但不幸的是还没有实现，所以在此期间，使用这个jQuery polyfill balance-text。

balanceText();

.box {
  width: 300px;
  font-size: 30px;
  border: 1px solid black;
  border-radius: 5px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.balance-text {
  text-wrap: balance;
}

<script src="//cdn.jsdelivr.net/npm/balance-text@3.3.0/balancetext.min.js"></script>
<div class="box"><span class="text balance-text">The words in this sentence cause it to require three lines.</span></div>