Question

我在＆lt; div＆gt;中有一些歌词。以下课程：

.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列，则第三列的空格将保留为空。

有没有办法让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中心文本列

实施例

2 个答案: