我有两个预告牌。第一个包含吉他和弦，必须在下面的歌词正上方。第二个预标记包含歌词。在屏幕上呈现时，它看起来像这样。（没有显示确切的标记，这只是为了演示问题）
D G D A7号
惊人的恩典，多么甜美的声音，拯救了一个像我这样的可怜虫。
这很管用。但是，如果行太长，并将其包装，则会发生以下情况：
德国
D A7号
神奇的恩典，多么甜蜜的
听起来，这救了我这样的可怜虫。
但我需要的是，当包装发生时，这是：
德国
神奇的恩典，多么甜蜜的
D A7号
听起来，这救了我这样的可怜虫。
该解决方案需要灵活，以适应浏览器的大小调整。
目前，我只是缩短线/增加固定的中断，以防止包装，但希望有一个更智能的解决方案，允许包装。
提前谢谢。
最佳答案
您可能想使用一些特定的值来使其看起来更好一些，但这里有一个基本的技巧，您可以使用：
* { 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>关于javascript - 如何使两行文字换行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56634938/