Borders on elements that span pages

[AndrewCampbell]

In my documentation I have a few code examples that I wrap in pre elements, which I then add a border and background colour to. Unfortunately, my code examples can be long and span page breaks. When that happens, the bottom border is displayed at the bottom of the page, even if the example continues onto the next page.

Output.png

I want the top and bottom borders to be present only for the actual start and end of the pre, like this.

Desired.png

My HTML looks like this.

Code: Select all

<pre xml:space="preserve">
Long content here</pre>

And my CSS looks like this.

Code: Select all

pre
{
	border: solid 2px #000000;
	background-color: #d3d3d3;
	border-radius: 6px;
	padding: 5px;
}

How can I achieve what I want? I am very reluctant to change the structure of my HTML, so I'd prefer a solution that works in CSS.

[AndrewCampbell]

I've asked tech support about this. It isn't currently supported in Flare.

[Lauren_S]

Hello. Our team is currently experiencing this exact issue and so I thought I would try to resurrect the topic here.

AndrewCampbell, did you ever receive a follow-up or devise a workaround for this?

Thank you.

[AndrewCampbell]

Sadly no.

Although I am currently looking at moving to DITA, for this and other reasons.