CSS center columns of text

Question

I have some song lyrics in a <div> with the following 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;
}

Width of the entire div is constrained to 1120px, and height to 520px.

If lyrics fill 3 columns, it looks fine. However, if lyrics fill 2 columns, space for a third column is left empty.

Is there a way to leave 3-column lyrics as they are, but to center 2-column lyrics, keeping column spacing the same, without resorting to slicing lyrics in javascript and processing the layout myself?

Examples

Correct behaviour with 3-columns: https://jsfiddle.net/udc9d1go/2/
Incorrect behaviour with 2-columns: https://jsfiddle.net/45f23o82/

You could try using [`:empty`](https://developer.mozilla.org/en-US/docs/Web/CSS/:empty). — Pyromonk, Jul 04 '17 at 01:13
@Pyromonk I don't have empty elements, just one div with some text. — Tamirlyn, Jul 04 '17 at 01:16

score 0 · Answer 1 · answered Jul 04 '17 at 01:23

0

You can try to erase the height setting of the container. That way the height will be dynamic, i.e. according to the contents, and if the contents is simple text (in lines, not in seperate blocks), it should be distributed evenly across the three columns.

answered Jul 04 '17 at 01:23

Johannes

64,305
18
73
130

If I remove column-fill: auto, it will distribute across all columns. This is, alas, not what I want. I do want 2 columns, but I'm getting an empty 3rd one. Also, shortening the text further doesn't help. – Tamirlyn Jul 04 '17 at 01:26
1

There is no real solution to your question - I wrote an answer to a similar question a while ago and added some examples ( https://stackoverflow.com/a/40942511/5641669 ). I won't write the whole thing again adapted to your particular situation, but maybe this old answer is interesting for you. – Johannes Jul 04 '17 at 01:34

Tamirlyn · Accepted Answer · 2017-07-04T09:29:05.923

I ended up writing some ES to increase left and right margins for the div in case text has a certain number of lines. This seems a fine work-around.

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;
}

Result: JSFiddle

CSS center columns of text

Examples

2 Answers2