Question

此问题已被问及here，但未得到回答。

我正在创建一个显示带和弦歌词的Android应用程序。模式是：

和弦
歌词
和弦
歌词
和弦
歌词
......

我正在使用WebView显示歌词，向WebView提供数据的示例如下：

<font color='#cc0029'>Em                      G</font><br />
Today is gonna be the day<br />
<font color='#cc0029'>                               D                                  A</font><br />
that they gonna throw it back to you,<br />
<font color='#cc0029'>Em                                 G</font><br />
by now you should have somehow<br />
<font color='#cc0029'>      D                                                          A</font><br />
realized what you gotta do.<br />
<font color='#cc0029'>Em                                          G                   D                         A              </font><br />
I don't belive that anybody feels the way I do<br />
<font color='#cc0029'>                                C          D              A</font><br />
about you now.<br />

（Relpaced  ，可见空间）

（在这里，由于StackOverflow编辑器，我使用的是_而不是空格）

缩放前的内容：

EM ______________ģ
  今天将是一天   _____________________D_________________A
  他们会把它扔回给你，
  Em____________________G
  到现在为止你应该有某种方式   ____D______________________________________A
  意识到你要做什么   Em____________________________G____________D____________________A
  我不相信任何人都有这样的感觉   _______________________C____D____A
  关于你。

缩放后的内容：

EM ______________ģ
  今天就要了   是一天   _____________________D_________________A
  他们是   要扔掉它   回到你身边，
  Em____________________G
  到现在为止你   应该有    不知何故
  ____D______________________________________A
  实现了什么   你得做什么   Em____________________________G____________D____________________A
  我不相信   任何人都感觉到   我的方式   _______________________C____D____A
  关于你。

我想要实现的目标：

EM
  今天就要了    摹
  是一天   ___________。
  他们是   _______D
  要扔掉它   _____________A
  回到你身边，
  EM
  到现在为止你   ___________G
  应该有   ___________。
  不知何故
  ____D
  实现了什么   ______________A
  你得做什么   EM
  我不相信   ______________G
  任何人都感觉到   ________D_______A
  我的方式   __________C___D___A
  关于你。

如何实现这一目标？

Answer 1

You need to group the lines by breakpoint

.line>div {
  display: inline-block;
  white-space: nowrap
}

.chord {
  color: #cc0029;
  display: block;
}

<div class="line">
  <div>
    <div class="chord">Em</div>
    Today is gonna
  </div>
  <div>
    <div class="chord">G</div>
    be the day
  </div>
</div>
<div class="line">
  <div>
    <div class="chord"></div>
    that they gonna
  </div>
  <div>
    <div class="chord">D</div>
    throw it back to
  </div>
  <div>
    <div class="chord">A</div>
    you,
  </div>
</div>

Since there are only a finite number of chords in a song and each chord corresponds with a particular snippet of lyrics, it should be fairly easy to do. Wrapping the set of snippets that make up a line in a div ensures there will always be a break at the end of the line, regardless of whether there is space to continue on the same line.

This also has the benefit of eliminating your alignment using whitespace, which is very brittle.

如何在缩放时将两条线断开？

1 个答案: