Jump to content

Tags have odd line breaks at end of blog posts

Go to solution Solved by paul2009,

Recommended Posts

Site URL: http://www.thecropbox.co.uk

I have tags that appear underneath the blog posts on my site, and for some reason there are weird line breaks appearing in the middle of tags. On the first or seccond one usually. Does anyone know why this might be happening or a way I can fix it?

I have checked to see if it was the way that the tags were added (was return pressed in the middle of entering the tag) but it doesn't seem to be that.

 

Screenshot 2020-09-15 at 10.01.36.png

Edited by LanaZ
Link to comment
  • 2 years later...
On 6/14/2023 at 2:04 AM, diavaldiablo said:

I'm also having this issue where either a word or even a random few letters will break onto the next line with what seems like no consistency. Is there a code to force a max character count before a word break in the tag box at the end of a blog post?

Can you share link to page where you have problem?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
  • Solution

Firstly, I have to comment on the site itself @TWBDesign

It's an amazing example of meaningful content and beautiful, intentional design 👏 👏

I love all of it.

image.thumb.png.3e4c54c85d2ecf6d7b378012b750e54b.png

Regarding the tags, I was able to fix this with:

span.blog-item-tag-wrapper {
  white-space: nowrap;
}

Toggling the CSS on and off, did this:

image.gif.e3a46047e4e0ca3df942f8f553415bc4.gif

Did this help? Please give feedback by clicking an icon below  ⬇️

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • 2 months later...
On 6/30/2023 at 11:13 AM, paul2009 said:

Firstly, I have to comment on the site itself @TWBDesign

It's an amazing example of meaningful content and beautiful, intentional design 👏 👏

I love all of it.

image.thumb.png.3e4c54c85d2ecf6d7b378012b750e54b.png

Regarding the tags, I was able to fix this with:

span.blog-item-tag-wrapper {
  white-space: nowrap;
}

Toggling the CSS on and off, did this:

image.gif.e3a46047e4e0ca3df942f8f553415bc4.gif

Did this help? Please give feedback by clicking an icon below  ⬇️

Thank you!

Link to comment
  • 5 months later...

The solution to this problem works fine in the browser preview, but for me when real world testing on my phone the blog tags would then be in a single line and push the view wider if they went over one line - essentially a no-break kind of setup.

I investigated the CSS and went down the stack a level and this worked better, grouping the tag names so they connect and don't break apart in weird places but also not causing another problem on the mobile device itself.

.blog-item-tag {
  white-space: nowrap;
}

This goes down one level and still captures each tag. Thanks for the solution as it helped me solve my issues. I am not sure if the mobile thing is an iPhone Safari issue but that was what I was testing on.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.