文本的CSS中心列

Question

我在下面的课上有一些歌词：

.lyrics
{
    /* position */
    margin: 40px;

    /* text */
    font-size: 18px;
    text-align: center;
    column-width: 300px;
    column-gap: 0;
    column-fill: auto;
    height: 420px;
    max-height: 420px;
}

整个div的宽度限制为1120 of，高度限制为520 of。

如果歌词填充3列，它看起来很好。但是，如果歌词填充2列，则第三列的空间将为空。

有没有办法让3列歌词保持原样，但以2列歌词为中心，保持相同的列间距，而不诉诸javascript中的切片歌词和自己处理布局？

示例

3列的正确行为：https://jsfiddle.net/udc9d1go/2/

2列的不正确行为：https://jsfiddle.net/45f23o82/

Answer 1

最后，我编写了一些ES来增加div的左右边距，以防文本有一定数量的行。这似乎是个不错的解决办法。

calculateMarginForLyrics = function(lyrics)
{
    // count <br /> tags and count </p> tags twice (except last one)
    var nLines = lyrics.match(/<br \/>/g || []).length + (lyrics.match(/<\/p>/g || []).length - 1) * 2;

    if (nLines <= 12) // fits in one column
        return 350;
    else if (nLines <= 24) // fits in two columns
        return 200;

    // fits in three columns
    return 40;
}

结果：JSFiddle

Answer 2

您可以尝试删除容器的height设置。这样，高度将是动态的，即根据内容，如果内容是简单的文本(以行表示，而不是在单独的块中)，则应该在三列之间均匀分布。