[mateoserendipiaParticipant]

Hi,

I’m trying to find the proper way to include multiple blank lines in text, i.e. multiple ‘carriage returns’. I’ve searched for hours on the internet, and in this forum, and many answers can be found, but they either don’t work at all, or not in all browsers, or are condemned by others as ‘bad form’ or ‘too much code’.

Please see the attached example. This is made up of two block grids elements. In order to have composers on the left and their works on the right line up properly, blank lines / carriage returns are inserted below some items on the left.

I tried <br>, but multiple <br>‘s are aways reduced to one.
Then I tried <p>&nbsp;</p>, which is basically a paragraph with one space in it. This works fine in Safari en Chrome so I applied this everywhere, until I noticed that it does not work at all in Firefox and IE (in those browsers they dissappear).
Then I tried <br style="" />, and this seems to work in all browsers.

But before I start replacing hundreds of instances again by this code I really would like to ask if I’m missing the obvious.

So the question would be: if you would have to insert multiple blank lines in text that show up correctly in all browsers, in which way would you achieve that?

Thanks!

[Rue NelModerator]

Hello There,

Thanks for writing in! In the content area, line breaks and newline are automatically converted to <br/> and and p tags. Even if you will add multiple instance of <br> tags or <p> </p>, WordPress will always clean it up. If you need something to separate your paragraphs just like what you have in your screenshot, may we recommend to use the gap element instead. You can simple have this code in your content:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec nisl id quam facilisis cursus. Pellentesque suscipit facilisis libero.</p>
[x_gap size="30px"]
<p>Fusce velit lorem, consequat at rhoncus a, cursus ac dolor. Donec sit amet erat porttitor, pellentesque massa non, fringilla risus.</p>
[x_gap size="30px"]
<p>Aliquam vel consequat est. Cras semper dictum arcu, sit amet molestie est faucibus nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>

For more details about the gap shortcode, please check it here:
http://theme.co/x/demo/integrity/1/shortcodes/gap/

Please let us know if this works out for you. Thank you.

[mateoserendipiaParticipant]

Hi,

Thanks for the answer. I had found the x-gap code – but the space it creates has to be exactly the height of one or mulltiple line(s) of text, even if line height or font size is changed during the designing process, so this cannot be done by defining the height in pixels within the x-code.

I guess I could do this by assigning a class to x-gap and then redefine that in custom css as necessasary, and by using ’em’ in stead of pixels. But this would seem a lot of code too for a simple carriage return…

Thanks

[ChristopherModerator]

Hi there,

You can add a class name like my-class to gap element, then add following CSS code:

.x-gap.my-class{
    margin: 10em 0 0 0;
}

Hope that helps.

[Author]

Posts