Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
missyranger

Summary title character limit

Question

Hi,

 

as you can see on the picture below my summary blocks are not equal because of the lenght of the title. Is there any way with CSS how to limit the length with let me say three dots in the end that i have all the panels same? I tried to change the high of the panels to the static number but with shorter title it looks stupid. 

 

Thank youCapture.thumb.PNG.dd7582334604c8055627851105dafb50.PNG

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 0

I wrote a script once that calculates the length of the longest text and grabs the height of its holder and then sets the other blocks to that height.

Edited by colin.irwin

Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0
52 minutes ago, colin.irwin said:

I wrote a script once that calculates the length of the longest text and grabs the height of its holder and then sets the other blocks to that height.

Would you mind to share it with me, if it would work still? Or point me to some solution how to achieve that? thank you very much.

Share this post


Link to post
  • 0

It wouldn't work in this case as I was using the data in the summary blocks to create my own grid layout.


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0

There are a few possibilities when attempting to solve the "equal height columns" problem (a common challenge in HTML for a long time).

  1. Use JavaScript to find the tallest of the columns and then set all other column heights explicitly. This also requires the function to run on browser/screen resize. This is what Colin mentioned.
  2. Use Flexbox or CSS Tables
  3. Rig up something using text-overflow: ellipses.

Selecting the best approach varies with each use-case, and within each use case, the specific code and CSS selectors will vary further. In order to provide code for a specific case such as yours, it's usually necessary to provide the link to the site/page in questions (and the view-only password for sites in trial mode).

 


If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...