Javascript 如何将两行文本包装在一起
我有两个预标签。第一个包含吉他和弦，它必须在下面的歌词上方。第二个pre标签包含歌词。在屏幕上渲染时，它看起来像这样。（没有显示确切的标记，这只是演示问题） D G D A7 神奇的优雅，多么甜美的声音，拯救了像我这样的可怜虫。 这个很好用。但是，如果线太长并缠绕，则会发生以下情况： D G D A7 Amazing Grace, how sweet the sound, that saved a wretch like me. D G D A7 神奇的恩典，多么甜蜜的爱情 听起来，这救了我这样一个坏蛋。 但当包装发生时，我需要的是： D G Amazing Grace, how sweet the D A7 sound, that saved a wretch like me. D G 神奇的恩典，多么甜蜜的爱情 D A7 听起来，这救了我这样一个坏蛋。 解决方案需要灵活，以适应浏览器的大小调整 目前，我只是在缩短生产线/添加固定中断以防止包装，但我更喜欢一种更智能的解决方案，允许包装Javascript 如何将两行文本包装在一起,javascript,html,css,Javascript,Html,Css,我有两个预标签。第一个包含吉他和弦，它必须在下面的歌词上方。第二个pre标签包含歌词。在屏幕上渲染时，它看起来像这样。（没有显示确切的标记，这只是演示问题） D G D A7 神奇的优雅，多么甜美的声音，拯救了像我这样的可怜虫。 这个很好用。但是，如果线太长并缠绕，则会发生以下情况： D G D A7 Amazing Grace, how sweet the sound, that
提前感谢。您可能希望使用一些特定的值来让它看起来更好一些，但这里有一个基本技巧，您可以使用：
*{框大小：边框框；}
.和弦{空白：行前；}
.和弦跨度{
线高：300%；
垂直对齐：底部对齐；
右边距：-1米；
左侧边缘：.2em；
}
格蕾丝，这只狗多可爱啊，它救了我这样的可怜虫。