How to add a line break to list item title

Site URL: https://bassoon-aardvark-m9nc.squarespace.com/board

I am using the list feature to show board member photos on a client's site. I would like a line break in the Content Title so that it is First Name <br> Last Name. This currently happens automatically for most names, but not all due to length. It is not possible to add html or returns in the Content Title field. So how might I achieve this?

Website linked above.

Password: pipclt

Hi. You need to add a piece of javascript code for that. 

14 hours ago, BFGS said:

Site URL: https://bassoon-aardvark-m9nc.squarespace.com/board

I am using the list feature to show board member photos on a client's site. I would like a line break in the Content Title so that it is First Name <br> Last Name. This currently happens automatically for most names, but not all due to length. It is not possible to add html or returns in the Content Title field. So how might I achieve this?

Website linked above.

Password: pipclt

Can you add & keep <br/> for a name? We can check easier

1 hour ago, tuanphan said:

Can you add & keep <br/> for a name? We can check easier

Honored to receive a reply from you, @tuanphan! 

I'm not sure what you mean. I'm not able to add a break tag in the title of a list. Please see the image I've attached. I know I need to inject JS for this task but not exactly sure how to make it work.

On 10/18/2021 at 3:58 PM, BFGS said:

Honored to receive a reply from you, @tuanphan! 

I'm not sure what you mean. I'm not able to add a break tag in the title of a list. Please see the image I've attached. I know I need to inject JS for this task but not exactly sure how to make it work.

Hi,

I mean add br to TITLE field. It should be: Barbara <br/> Hall

When you're done, let me know. I will test some code to make Squarespace allow br tag to run.

2 hours ago, tuanphan said:

Hi,

I mean add br to TITLE field. It should be: Barbara <br/> Hall

When you're done, let me know. I will test some code to make Squarespace allow br tag to run.

Oh, I see what you mean. Okay, I have completed that. And thank you so much!

On 10/20/2021 at 9:58 PM, BFGS said:

Oh, I see what you mean. Okay, I have completed that. And thank you so much!

Add this to Last line in Code Injection > Footer

<style>
  $(document).ready(function(){
  $("h2.list-item-content__title").each(function(){
    $(this).html($(this).text());
  });
});
</style>

6 hours ago, tuanphan said:

Add this to Last line in Code Injection > Footer

<style>
  $(document).ready(function(){
  $("h2.list-item-content__title").each(function(){
    $(this).html($(this).text());
  });
});
</style>

 

I've completed this but it has not done what's expected. The </br> tag still shows in the HTML.

On 10/22/2021 at 11:51 PM, BFGS said:

I've completed this but it has not done what's expected. The </br> tag still shows in the HTML.

ah, typo, script, not style, use this new code

<script>
  $(document).ready(function(){
  $("h2.list-item-content__title").each(function(){
    $(this).html($(this).text());
  });
});
</script>

18 hours ago, tuanphan said:

ah, typo, script, not style, use this new code

<script>
  $(document).ready(function(){
  $("h2.list-item-content__title").each(function(){
    $(this).html($(this).text());
  });
});
</script>

 

I probably should've caught that myself! Thank you SO much for your time and code. It worked! Very grateful for your awesome humanity.

Just wanted to add to this since I was referencing the same question and couldn't get the code to work. ( It seems obvious now, but wasn't thinking at the time. )  In order for the code to work you need to load the jquery into the header code injection.  So in all: 

Header add -

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>

Footer add - 

<script>
  $(document).ready(function(){
  $("h2.list-item-content__title").each(function(){
    $(this).html($(this).text());
  });
});
</script>

Hope that helps. 

Hi! Thank you so much for such an easy solution! I had been struggling to figure this out. Is there a way to change the font size of the text in the second line to make it smaller? Something like they did here but with the title?

Thank you very much!

On 9/6/2023 at 5:24 AM, Rangifer said:

Hi! Thank you so much for such an easy solution! I had been struggling to figure this out. Is there a way to change the font size of the text in the second line to make it smaller? Something like they did here but with the title?

 

Thank you very much!

Can you share link to page where you use title? We can adjust code easier

On 10/22/2021 at 11:26 AM, tuanphan said:

Add this to Last line in Code Injection > Footer

<style>
  $(document).ready(function(){
  $("h2.list-item-content__title").each(function(){
    $(this).html($(this).text());
  });
});
</style>

 

hey @tuanphan

i'm trying to do a similar thing with accordion titles, i'd like to be able to control them with html.

i'm trying to change the font of the numbers by isolating them the bold/strong feature. i can't however seem to get it to work. i tried editing the code above with this:

<style>
  $(document).ready(function(){
  $("h2.list-item-content__title, .accordion-item__title").each(function(){
    $(this).html($(this).text());
  });
});
</style>

and then in the accordion title i have put " <strong> 01/ </strong> accordion title. "

css i have tried using variations of:

#block-yui_3_17_2_1_1700055594134_17636  .accordion-item__title h4 strong * {font-family: 'montserrat'!important;
font-size:08.em!important;
letter-spacing:0.2em!important;}

38 minutes ago, daniellenoakes said:

hey @tuanphan

 

i'm trying to do a similar thing with accordion titles, i'd like to be able to control them with html.

i'm trying to change the font of the numbers by isolating them the bold/strong feature. i can't however seem to get it to work. i tried editing the code above with this:

 

<style>
  $(document).ready(function(){
  $("h2.list-item-content__title, .accordion-item__title").each(function(){
    $(this).html($(this).text());
  });
});
</style>

 

and then in the accordion title i have put " <strong> 01/ </strong> accordion title. "

css i have tried using variations of:

 

#block-yui_3_17_2_1_1700055594134_17636  .accordion-item__title h4 strong * {font-family: 'montserrat'!important;
font-size:08.em!important;
letter-spacing:0.2em!important;}

 

 

 

Use this approach

If it doesn't work, please share link to page where you use accordion, I can check easier