如何在縮放時將兩條線分開？

我正在製作一個顯示帶和絃的歌詞的android應用程序。圖案是這樣的：

和絃
歌詞
和絃
歌詞
和絃
歌詞
......

我使用web視圖顯示歌詞和數據給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______________G
今天就是這一天
_____________________D_________________A
那他們會扔回去給你，
Em____________________G
現在，你應該有某種方式
____D______________________________________A
意識到你得做
Em____________________________G____________D____________________A
我不相信任何人的感覺我的方式
_______________________C____D____A
關於你現在。

我變焦後得到了什麼：

Em______________G
今天是要去
是天
_____________________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
關於你現在。

這怎麼能實現呢？

來源

2017-04-20 MrGian

由於只有一首歌的和絃數量有限，您需要按斷點

.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>

線路和每個和絃與歌詞的特定片段對應，它應該做起來相當容易。將一組構成線段的片段包裝在一個div中，可以確保在線的末尾總會有一箇中斷，而不管在同一線上是否有空間繼續存在。

這也有利用使用非常脆弱的空白消除對齊。

來源

2017-04-20 17:10:26 Enrico

如何在縮放時將兩條線分開？

回答

相關問題