Jump to content

How to add a line break to list item title

Recommended Posts

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

Link to comment
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

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

Screen Shot 2021-10-18 at 3.56.44 AM.png

Link to comment
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.

Screen Shot 2021-10-18 at 3.56.44 AM.png

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.

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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!

Link to comment
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>

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

Link to comment
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>

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

Link to comment
  • 6 months later...

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. 

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.