-1

I have a small HTML website where it displays information (specifically, train stations) in an HTML table. On one row it has a fixed length, meaning that sentences longer than the width of the table overflow on to the next line. This is fine, but I need it so that it is obvious when the gap in-between lines is because of a long phrase or because it is the next in a list. See the example below:

enter image description here

There are two stops for this train, Reading (which fits on one line) and London Paddington (which overflows onto a second line). I need it so that the gap between 'Reading' and 'London' is larger than the gap between 'London' and 'Paddington'. The HTML for it looks like this:

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

I have tried to make this clear but if you don't understand please just say! Thank you.

Also, I have tried the solution at stackoverflow.com/questions/1409649 and it did not work for me.

Jamie W
  • 439
  • 3
  • 21
  • 4
    Possible duplicate of [How to change the height of a
    ?](https://stackoverflow.com/questions/1409649/how-to-change-the-height-of-a-br)     – Moumit Sep 10 '17 at 16:21
  • Why are you using a `br` here? Since `Reading` and `London Paddington` are different entities, you should wrap each in a block element such as a `div` or `li` – Håken Lid Sep 10 '17 at 16:24
  • I have my reasons - to be precise, I need to change the stops later on using JS and this is how I want to do it. – Jamie W Sep 10 '17 at 16:25
  • It would be more semantic to use an `
      `. Please don't compromise usability and accessibility for ease of coding!
     – BenM Sep 10 '17 at 16:29
  • line-height, reset on font-size for br ... did you try anithing yet ? – G-Cyrillus Sep 10 '17 at 16:36
  • I tried settings margins, line height and padding but it didn't work. – Jamie W Sep 10 '17 at 16:40

1 Answers1

0

You can give a look at font-size reset to <br/> only:

example, second paragraph shows line breaks increased.

/* 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
}
<p>Calling at:<br>Reading<br>London Paddington</p>
<p>Calling at:<br>Reading<br>London Paddington</p>
result expected https://codepen.io/gc-nomade/pen/brXQgQ
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • In the code snippet preview I can't see any difference between the black and green. Am I missing something? – Jamie W Sep 10 '17 at 17:21
  • @penguin_k what browser do you use (tested with IE11, chrome & ff and even the old and latest safari for windows .. that one is useless to test but stillremains on my pc). thanks for your feedback :) I added a pic of the expected resut from FF – G-Cyrillus Sep 10 '17 at 17:23