如何让两行文字自动换行答案

【问题标题】：How to make 2 lines of text wrap together如何让两行文字自动换行
【发布时间】：2019-06-17 15:56:47
【问题描述】：

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

D G D A7 奇异恩典，多么悦耳的声音，拯救了我这样的可怜虫。

这很好用。但是，如果行太长并换行，就会发生这种情况：

D G D A7 奇异恩典，多么甜蜜声音，这救了像我这样的可怜虫。

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

D G 奇异恩典，多么甜蜜 D A7 声音，这救了像我这样的可怜虫。

解决方案需要灵活适应浏览器的大小调整。

目前，我只是缩短行数/添加固定中断以防止换行，但我更喜欢允许换行的更智能的解决方案。

提前致谢。

【问题讨论】：

您对标记有多少控制权？你能把每根绳子和相关的歌词都包起来吗？
我可以完全控制代码
我会这样做：stackoverflow.com/a/50359172/8620333 .. 也类似：stackoverflow.com/a/50092148/8620333

标签： javascript html css

【解决方案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>

【讨论】：