html 中的多个白色 space

Question

我想确保我的单词上面的和弦被多个白色 space 很好地分隔开。

问题是当我使用 pre 时，它是预先格式化的，因此不是我想要的。

另外， ，代码看起来很丑。

解决此问题的最佳方法是什么？

<pre>Chorus: Em A A common love for each other F#m Bm A common gift to the Saviour </pre>                       Em                    A                 D     D7 A common bond holding us to the Lord

这里是 link 到 url：http://teach.sg/blog/a-common-love/

Answer 1

有一些白色的space字像&emsp;会有用。您可以使用 	 作为制表符。您也可以为此使用 CSS。

Answer 2

我有一个替代解决方案，请查看它是否适合您的目的：

我将所有和弦嵌套在一个 <span class = 'chord'> 元素中，然后使用 CSS 样式规则将和弦向上和向左移动一点。这种方法有一点丑陋的白色space，但它比垃圾space字符更简洁，也绝对更优雅。

.chord {
  position: relative;
  font-size: 0.8em;
  bottom: 1.5em;
  right: 2em;
  width: 0.5em;
}
p {
  line-height: 2em;
}

<body>
  <p>A common love <span class='chord'>Em</span> for each other <span class='chord'>A</span> 
  </p>
  <p>A common gift <span class='chord'>F#m</span> to the Saviour <span class='chord'>Bm</span> 
  </p>
  <p>A common bond <span class='chord'>Em</span> holding us <span class='chord'>A</span> to the Lord <span class='chord'>D-D7</span> 
  </p>
</body>

JSFiddle here.

html 中的多个白色 space

Multiple white space in html

html

whitespace

styles