Element boundary expanded by empty spaces in text

[Lucy]

So, I have a div containing a h1 which has a ::before and ::after pseudoelement. These are basically displaying lines at either side as a decorative feature.

 

The h1 element is set to display as an inline-block, text aligned in the centre, with a maximum width set, so it overflows onto the next line if needed. This is where the problem occurs.

 

Because there is an empty space at the end of a line, the boundary is wider than the text you're actually seeing, and so the space inbetween the h1 text and the decorative lines is much greater when the text breaks onto a new line.

 

I noticed this doesn't happen with inline elements, but that isn't an option as I need the max-width.

 

Can anyone suggest a solution?

 

Edit - I don't think it's actually the spaces in the text anymore, there is too much for that. :/

Edited July 10, 2015 by Lucy

[COBOLdinosaur]

We can't trouble-shoot what we can't see. Post a link, or at least the code please.