CSS 文本居中列

Question

我在

中有一些歌词 class:

.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 的宽度限制为 1120px，高度限制为 520px。

如果歌词填满 3 栏，看起来还不错。但是，如果歌词填满 2 列，则第三列的 space 留空。

有没有办法让 3 栏歌词保持原样，但让 2 栏歌词居中，保持栏间距不变，而不用在 javascript 中对歌词进行切片并自行处理布局？

例子

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

Answer 1

您可以尝试清除容器的height设置。这样高度将是动态的，即根据内容，如果内容是简单的文本（按行，而不是单独的块），它应该均匀分布在三列中。

Answer 2

我最后写了一些 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

CSS 文本居中列

CSS center columns of text

css

css-multicolumn-layout

例子