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

发布于04月07日

我有一个项目，其中一些页面的标题有大字体.标题是动态的，可以是一行或3-4行.出于美学原因，我希望标题既居中，又排列线条，以便最长(最宽)的线条位于底部，最短的线条位于顶部.就像 pyramid 的形状.

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

有什么建议吗？:-)

推荐答案

我并不奇怪，但我已经提出了这个解决方案，满足了我对对齐的期望.如果你的眼睛因为这个片段而受伤，请给出一些优化建议.我已经知道，在调整灵活元素的大小后，这将不起作用.

我当然更喜欢用纯CSS制作的解决方案，所以如果你正在列出W3C，case text-align: pyramid;甚至text-align: simon;(wink)现在是官方要求的.

$('#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);
});