如何用CSS让文本最后一行容纳尽可能多内容而非首行

我正在制作一款底部带有标题的产品卡片，当标题较长需要换行时，浏览器默认会让首行尽可能容纳更多内容，但我希望最后一行能容纳尽可能多的文本——因为卡片底部有从黑色到透明的渐变，最后一行文本的可读性比上方行更强。

我尝试过text-align-last属性，但它仅调整了最后一行的对齐位置，并没有让该行容纳更多文本。要求纯CSS实现效果，不使用PHP或JavaScript。

现有代码 #

HTML代码 #

<div class="row-3-number">
  <div class="row-3-number-image">
    <div class="position-container position-container-3">3</div>
    <div class="row-3-number-gradient"></div>
    <span class="top-10-price top-10-old-price">€ 49,95</span>
    <span class="top-10-price">€ 38,95</span>
    <span class="row-3-number-title">Globe Whiskey Decanter with Premium Stopper</span>
    <img src="images/globe-decanter-hoofd_1.webp" alt="Globe Whiskey Decanter">
  </div>
  <p>Met deze indrukwekkende Globe Whiskey Decanter serveer je jouw favoriete drankje in stijl. De glazen karaf heeft een luxe uitstraling een inhoud van maar liefst 0.9L!</p>
</div>

CSS代码 #

.top-10-price {
    position: absolute;
    bottom: 20px;
    right: 20px;
    height: 20px;
    font-size: 20px;
    color: #fff;
}

.top-10-old-price {
    bottom: 50px;
    text-decoration: line-through;
    color: rgba(255, 255, 255, .70);
}

.row-3-number {
    width: 350px;
    overflow: hidden;
}

.row-3-number > p {
    margin: 20px;
}

.row-3-number-image {
    width: 350px;
    height: 350px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.row-3-number-image > img {
    width: 350px;
    height: 350px;
}

.row-3-number-title {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 230px;
    color: #fff;
    font-size: 20px;
}

纯CSS解决方案 #

核心方案：使用text-wrap: pretty #

通过给标题元素添加text-wrap: pretty属性，可以让浏览器优化换行逻辑，优先让最后一行容纳尽可能多的文本，而非让首行填满。

修改后的.row-3-number-title CSS：

.row-3-number-title {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 230px;
    color: #fff;
    font-size: 20px;
    /* 添加以下属性实现需求 */
    text-wrap: pretty;
    /* 兼容旧版浏览器可选 */
    text-wrap: optimizeLegibility;
    line-height: 1.2; /* 确保行高合适，避免文本重叠 */
    display: inline-block; /* 确保属性生效 */
}

原理说明 #

text-wrap: pretty（旧版为optimizeLegibility）会改变浏览器的换行算法：它不会优先填满每一行，而是调整换行位置，让最后一行包含尽可能多的内容，同时保持整体文本的可读性，完全匹配需求。

兼容旧浏览器方案 #

如果需要兼容更早的浏览器版本，可以配合hyphens: auto实现类似效果（需确保文档语言正确设置，比如<html lang="en">）：

.row-3-number-title {
    /* 其他属性 */
    hyphens: auto;
    lang: en;
}

内容的提问来源于stack exchange，提问作者ICT - Brada-Groep