Jump to content

Linebreak in Carousel

Go to solution Solved by iamdavehart,

Recommended Posts

Hi, I am trying to implement line breaks in the titles of my carousel. This is due to the fact, that it splits words without regards to grammar. I stumbled across a solution which meant using one of those two:

<br/>
<div>

within the title. When I finish typing, everything looks as desired. However after saving and reloading, the <br/>-Tag becomes visible. For reference see picture 1 (correct behavior before saving) and picture 2 (wrong behavior).

 

Anyone having a solution?

Bildschirmfoto 2024-03-25 um 17.48.33.png

Bildschirmfoto 2024-03-25 um 17.49.38.png

Link to comment
7 hours ago, tuanphan said:

I used to solve this case, before you able to use <br> you need to add a script code, to force SS recognize br tag in Carousel.

Can you share link to page where you use Carousel? I can check & give you script code easier

Hi, thanks for your reply. The site is https://chicory-pumpkin-f7t7.squarespace.com with password „test“.

however I am unsure if JS is included in my plan.

 

Regards

Link to comment
On 3/27/2024 at 10:58 PM, msm said:

Hi, thanks for your reply. The site is https://chicory-pumpkin-f7t7.squarespace.com with password „test“.

however I am unsure if JS is included in my plan.

 

Regards

Do you use Personal or Business Plan?

image.thumb.png.1f52f9f70c5b1e7061519b2c2c229c18.png

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
On 3/29/2024 at 8:51 AM, tuanphan said:

Do you use Personal or Business Plan?

image.thumb.png.1f52f9f70c5b1e7061519b2c2c229c18.png

I use the personal plan. If it is unavoidable I must upgrade. But I hoped I don’t have to pay 96€ per Year just for linebreaks in Carousels 😅

Link to comment
  • Solution
Posted (edited)

In the very specific example you've given you're really talking about how hyphens are brought in to wrapping long words. This can be done using a css property of "hyphens", and therefore no upgrade to javascript required.

in your case, I think the best thing to do here is to set it to "manual" and then insert hard or soft breaks depending on your use case. hard breaks are just "-" and will always be broken, but if you insert a soft break in the middle of the word where you want it to break if there isn't enough room. (have tested and this works in the carousel title).

EDIT: To insert a soft break you can do this by copying it using something like charmap. It's unicode is 00AD, or 173. Squarespace will strip the html version which is &shy; (i thought that would work at first), but if you just copy it and paste it in as the unicode character it will work.

I think the hyphens property defaults to auto and that should respect &shy, but if it doesn't work straight away you just need to add a rule to your site CSS that sets the hyphen property. It's probably better to do this using a rule that targets just that section Id (you can find the id using the squarespace Section ID finder extension, but I've used the right one in the example below).

section[data-section-id="65bf889227dbcd753275e596"] h2.list-item-content__title {
    hyphens:manual;
}

 

 

 

 

 

 

more information here: Wrapping and breaking text - CSS: Cascading Style Sheets | MDN (mozilla.org)

 

Edited by iamdavehart
can't use #shy; added video

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

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.