CODEWITHSUNDEEP
javascripthtmlcss
danday74
danday74

Reputation: 56946

How to make 2 lines of text wrap together

I have 2 pre tags. The first one contains guitar chords which must be above the the lyrics beneath exactly. The 2nd pre tag contains the lyrics. It looks something like this when rendered on screen. (Not showing exact markup, this is just to demo the issue)

D                  G         D                               A7
Amazing Grace, how sweet the sound, that saved a wretch like me.

This works fine. However, if the lines get too long and wrap this happens:

D                  G         
D                               A7
Amazing Grace, how sweet the 
sound, that saved a wretch like me.

But what I need, when wrapping occurs, is this:

D                  G         
Amazing Grace, how sweet the 
D                               A7
sound, that saved a wretch like me.

The solution needs to be flexible to accommodate browser resizing.

Currently, I am just shortening the lines / adding fixed breaks to prevent wrapping but would prefer a more intelligent solution that allows for wrapping.

Thanks in advance.

Upvotes: 2

Views: 345

Answers (1)

Ray Butterworth
Ray Butterworth

Reputation: 618

You might want to play with some of the specific values to make it look a little better, but here's one basic technique that you could use:

* { box-sizing: border-box; }
.chords { white-space: pre-line; }
.chords span {
    line-height: 300%;
    vertical-align: bottom;
    margin-right: -1em;
    margin-left: .2em;
}
<div class="chords">
    <span>D</span>Amazing Grace, how <span>G</span>sweet the <span>D</span>sound, that saved a wretch like <span>A7</span>me.
</div>

Upvotes: 2

Related Questions