使换行符比正常的行间距大

Question

我有一个小型HTML网站，它在HTML表格中显示信息（特别是火车站）。在一行上它有一个固定的长度，这意味着长于表格宽度的句子溢出到下一行。这很好，但是我需要它，以便当线之间的间隙是由于长短语或因为它是列表中的下一个时很明显。请参阅以下示例：

这列火车有两站，雷丁（适合一条线）和伦敦帕丁顿（溢出到第二条线）。我需要它，以便“阅读”和“伦敦”之间的差距大于“伦敦”和“帕丁顿”之间的差距。它的HTML看起来像这样：

<p>Calling at:<br>Reading<br>London Paddington</p>

我试图明确这一点，但如果你不明白，请说出来！谢谢。

另外，我在stackoverflow.com/questions/1409649上尝试了这个解决方案，它对我没用。

Answer 1

您可以只看font-size重置为<br/>：

示例，第二段显示换行符增加。

＆＃13;

＆＃13;

/* increase line-height on break line tags */

p+p br {
  font-size: 1.5em;/* tune your own value use calc(1em + 10px) or vmin,vmax, ... whatever */
  vertical-align: top;
}

p {
  display: inline-block;
  margin: 1em;
  vertical-align: top;
  border: solid;
  font-size: 1em;
}

p+p {
  color: green
}

＆＃13;

<p>Calling at:<br>Reading<br>London Paddington</p>
<p>Calling at:<br>Reading<br>London Paddington</p>

＆＃13;

＆＃13;

＆＃13; https://codepen.io/gc-nomade/pen/brXQgQ