如何制作居中标题样式，其中换行符将最长的行排列在底部

Question

我有一个项目，其中一些页面的标题具有大字体大小。标题是动态的，可以是一行，也可以是 3-4 行。出于美观原因，我希望标题既居中又排列线条，以便最长（最宽）的线条位于底部，最短的线条位于顶部。就像金字塔的形状。

我不知道这在纯 CSS 中是否可行，或者我应该如何解决这个问题？

有什么建议么？:-)

Answer 1

我不是 JQuery 奇迹，但我已经制作了这个解决方案，它满足了我对所要求的对齐的期望。如果这段代码让您的眼睛感到不适，请提供一些优化建议。我已经知道在调整灵活元素的大小后这将不起作用。

我当然更喜欢由纯 CSS 制成的解决方案，因此，如果您列出 W3C，则现在正式要求提供案例text-align: pyramid;或什至（眨眼）。text-align: simon;

$('#title').each(function(){

    var words = $(this).text().split(/\s+/);
    var total = words.length;
    var originalWidth = $(this).css("width");
    var maxWidth = $(this).width();
    var tempText = $(this);
    var string = "";
    var currentLineString = "";

    $(this).empty();
    tempText.css("width", "auto");

    for (i = 0; i < total; i++){

        var newString = words[total-i-1] + " " + currentLineString;
        tempText.text(newString);

        if (tempText.width() >= maxWidth) {
            tempText.text(currentLineString);
            maxWidth = tempText.width();
            string = currentLineString + "<br>" + string;
            currentLineString = "";
            i--;
        } else {
            currentLineString = newString;
        }
    }
    string = currentLineString + "<br>" + string;
                
    tempText.css("width", originalWidth);
    $(this).html(string);
});