Question

我有2个前置标签。第一个包含吉他和弦，该和弦必须恰好在歌词下方。第二个pre标签包含歌词。在屏幕上呈现时看起来像这样。（未显示确切的标记，这只是为了演示问题）

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

这很好。但是，如果行太长而无法包裹，则会发生这种情况：

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

但是当包装发生时，我需要的是这个

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

该解决方案必须灵活以适应浏览器的大小调整。

当前，我只是在缩短行数/添加固定的中断以防止换行，但希望使用一种更智能的解决方案来进行换行。

谢谢。

Answer 1

您可能希望使用一些特定的值来使其看起来更好一些，但这是您可以使用的一种基本技巧：

* { 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>

如何使两行文字换行

1 个答案: