msm Posted March 25 Share Posted March 25 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? Link to comment
tuanphan Posted March 27 Share Posted March 27 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 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
msm Posted March 27 Author Share Posted March 27 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
tuanphan Posted March 29 Share Posted March 29 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? 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
msm Posted March 30 Author Share Posted March 30 On 3/29/2024 at 8:51 AM, tuanphan said: Do you use Personal or Business Plan? 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 iamdavehart Posted March 30 Solution Share Posted March 30 (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 ­ (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 ­, 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; } 20240330-1218-15.8028240.mp4 more information here: Wrapping and breaking text - CSS: Cascading Style Sheets | MDN (mozilla.org) Edited March 30 by iamdavehart can't use #shy; added video tuanphan 1 Dave Hart. Software/Technology Consultant living in London. buymeacoffee Link to comment
msm Posted March 30 Author Share Posted March 30 @iamdavehart Thank you, that's the one! It seems to work now 🙏🏼 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment