Jump to content

Element boundary expanded by empty spaces in text

Recommended Posts

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 by Lucy

Share this post

Link to post
Share on other sites

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

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...